android h5 多图上传

在Android应用中，H5页面是非常常见的，而多图上传也是H5页面中常用的功能之一。本文将介绍Android H5多图上传的原理和详细实现方式。

一、原理

在Android应用中，H5页面是通过WebView来展示的。WebView是一个基于WebKit引擎的浏览器控件，它可以在Android应用中嵌入网页，并且支持网页的所有功能。

在H5页面中，多图上传的原理是通过JavaScript来实现的。当用户点击上传按钮时，JavaScript会调用Android中的一个接口，将选中的图片文件传递给Android应用，然后Android应用再将图片上传到服务器。

具体来说，Android应用需要实现以下功能：

1. 在WebView中注册一个JavaScript接口，用于接收H5页面传递的图片文件。

2. 实现一个文件选择器，用于让用户选择要上传的图片文件。

3. 将选择的图片文件转换成Base64编码的字符串，然后传递给H5页面。

4. 在H5页面中，通过JavaScript调用Android接口，将Base64编码的图片字符串传递给Android应用。

5. Android应用将Base64编码的图片字符串解码成图片文件，然后上传到服务器。

二、详细实现方式

1. 注册JavaScript接口

在Android应用中，可以通过WebView的addJavascriptInterface()方法来注册一个JavaScript接口。这个接口需要实现一个public方法，用于接收H5页面传递的参数。

示例代码：

```

webView.addJavascriptInterface(new JsInterface(), "android");

class JsInterface {

@JavascriptInterface

public void uploadImages(String images) {

// 将Base64编码的图片字符串上传到服务器

}

}

```

在H5页面中，可以通过JavaScript调用这个接口，将Base64编码的图片字符串传递给Android应用。

示例代码：

```

function uploadImages() {

var images = []; // 存储选择的图片文件

// 弹出文件选择器，让用户选择图片文件

var input = document.createElement('input');

input.type = 'file';

input.accept = 'image/*';

input.multiple = true;

input.onchange = function () {

for (var i = 0; i < input.files.length; i++) {

var file = input.files[i];

images.push(file);

}

// 将选中的图片文件转换成Base64编码的字符串

var reader = new FileReader();

reader.onload = function () {

var base64 = reader.result;

// 调用Android接口，将Base64编码的图片字符串传递给Android应用

android.uploadImages(base64);

};

reader.readAsDataURL(file);

};

input.click();

}

```

2. 实现文件选择器

在Android应用中，可以通过Intent来调用系统的文件选择器，让用户选择要上传的图片文件。

示例代码：

```

Intent intent = new Intent(Intent.ACTION_GET_CONTENT);

intent.setType("image/*");

intent.putExtra(Intent.EXTRA_ALLOW_MULTIPLE, true);

startActivityForResult(Intent.createChooser(intent, "选择图片"), REQUEST_CODE);

```

在选择图片文件后，Android应用会收到一个onActivityResult()回调，在这个回调中可以获取选择的图片文件。

示例代码：

```

@Override

protected void onActivityResult(int requestCode, int resultCode, Intent data) {

super.onActivityResult(requestCode, resultCode, data);

if (requestCode == REQUEST_CODE && resultCode == RESULT_OK) {

List images = new ArrayList<>();

if (data.getClipData() != null) {

// 多选模式

int count = data.getClipData().getItemCount();

for (int i = 0; i < count; i++) {

Uri uri = data.getClipData().getItemAt(i).getUri();

images.add(getImagePath(uri));

}

} else if (data.getData() != null) {

// 单选模式

Uri uri = data.getData();

images.add(getImagePath(uri));

}

// 将选择的图片文件转换成Base64编码的字符串，然后传递给H5页面

for (String image : images) {

String base64 = encodeImage(image);

webView.loadUrl("javascript:uploadImages('" + base64 + "')");

}

}

}

private String getImagePath(Uri uri) {

String[] projection = {MediaStore.Images.Media.DATA};

Cursor cursor = getContentResolver().query(uri, projection, null, null, null);

int column_index = cursor.getColumnIndexOrThrow(MediaStore.Images.Media.DATA);

cursor.moveToFirst();

String path = cursor.getString(column_index);

cursor.close();

return path;

}

private String encodeImage(String path) {

Bitmap bitmap = BitmapFactory.decodeFile(path);

ByteArrayOutputStream stream = new ByteArrayOutputStream();

bitmap.compress(Bitmap.CompressFormat.JPEG, 100, stream);

byte[] bytes = stream.toByteArray();

return Base64.encodeToString(bytes, Base64.DEFAULT);

}

```

3. 将Base64编码的图片字符串传递给H5页面

在Android应用中，可以通过WebView的loadUrl()方法来调用H5页面中的JavaScript方法，将Base64编码的图片字符串传递给H5页面。

示例代码：

```

String base64 = encodeImage(image);

webView.loadUrl("javascript:uploadImages('" + base64 + "')");

```

4. 解码图片并上传到服务器

在JavaScript中，调用Android接口时，会将Base64编码的图片字符串作为参数传递给Android应用。Android应用需要将这个字符串解码成图片文件，然后上传到服务器。

示例代码：

```

class JsInterface {

@JavascriptInterface

public void uploadImages(String images) {

// 将Base64编码的图片字符串解码成图片文件

byte[] bytes = Base64.decode(images, Base64.DEFAULT);

Bitmap bitmap = BitmapFactory.decodeByteArray(bytes, 0, bytes.length);

// 上传图片到服务器

uploadImage(bitmap);

}

private void uploadImage(Bitmap bitmap) {

// TODO: 上传图片到服务器

}

}

```

以上就是Android H5多图上传的原理和详细实现方式。通过这种方式，Android应用可以方便地实现H5页面中的多图上传功能。