在现代的web开发中，H5技术已经能够实现许多原本需要原生应用才能完成的功能，其中就包括通过手机相机或相册获取图片。在Android平台上，开发者常常会使用WebView来加载H5页面。为了将用户选择的多张照片传递给H5，我们需要结合JavaScript和Android的接口。
一、H5端的代码
在我们开始之前，首先需要准备H5的代码部分，以便处理用户选择的图片。下面是一个简单的HTML示例，它包含一个文件输入框，允许用户选择多张图片：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>上传图片</title>
<style>
img {
width: 100px;
height: auto;
margin: 10px;
}
</style>
</head>
<body>
<h1>选择多张图片</h1>
<input type="file" id="fileInput" multiple accept="image/*" />
<div id="imagePreview"></div>
<script>
document.getElementById('fileInput').addEventListener('change', function(event) {
const files = event.target.files;
const imagePreview = document.getElementById('imagePreview');
imagePreview.innerHTML = ''; // 清空预览区域
Array.from(files).forEach(file => {
const img = document.createElement('img');
img.src = URL.createObjectURL(file);
imagePreview.appendChild(img);
});
});
</script>
</body>
</html>
二、Android端的代码
接下来，我们需要在Android应用中通过WebView加载H5页面，并实现对多张图片的选择和传递。以下是一个基本的实现步骤：
- 在AndroidManifest.xml中添加权限:
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
- 创建WebView并设置对应的WebChromeClient:
在你的Activity中，创建一个WebView并设置WebChromeClient来处理文件选择。
import android.Manifest;
import android.content.Intent;
import android.content.pm.PackageManager;
import android.net.Uri;
import android.os.Build;
import android.os.Bundle;
import android.webkit.ValueCallback;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import androidx.annotation.Nullable;
import androidx.appcompat.app.AppCompatActivity;
import androidx.core.app.ActivityCompat;
import androidx.core.content.ContextCompat;
public class MainActivity extends AppCompatActivity {
private WebView webView;
private ValueCallback<Uri[]> filePathCallback;
private final int FILECHOOSER_RESULTCODE = 1;
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
webView = findViewById(R.id.webView);
WebSettings webSettings = webView.getSettings();
webSettings.setJavaScriptEnabled(true);
webView.setWebChromeClient(new WebChromeClient() {
@Override
public boolean onShowFileChooser(WebView webView, ValueCallback<Uri[]> filePathCallback, FileChooserParams fileChooserParams) {
MainActivity.this.filePathCallback = filePathCallback;
openImageChooser();
return true;
}
});
webView.loadUrl("file:///android_asset/upload.html"); // 假设H5页面放在assets目录
}
private void openImageChooser() {
Intent intent = new Intent(Intent.ACTION_GET_CONTENT);
intent.addCategory(Intent.CATEGORY_OPENABLE);
intent.setType("image/*");
intent.putExtra(Intent.EXTRA_ALLOW_MULTIPLE, true);
startActivityForResult(Intent.createChooser(intent, "选择图片"), FILECHOOSER_RESULTCODE);
}
@Override
protected void onActivityResult(int requestCode, int resultCode, @Nullable Intent data) {
super.onActivityResult(requestCode, resultCode, data);
if (requestCode == FILECHOOSER_RESULTCODE && filePathCallback != null) {
Uri[] results = null;
if (resultCode == RESULT_OK) {
if (data != null) {
if (data.getClipData() != null) {
int count = data.getClipData().getItemCount();
results = new Uri[count];
for (int i = 0; i < count; i++) {
results[i] = data.getClipData().getItemAt(i).getUri();
}
} else if (data.getData() != null) {
results = new Uri[]{data.getData()};
}
}
}
filePathCallback.onReceiveValue(results);
filePathCallback = null;
}
}
}
三、总结
以上代码展示了如何在Android通过WebView与H5结合，实现选择多张图片并传递给H5的功能。H5端通过文件输入框来选择图片，Android端通过onActivityResult方法来接收用户选择的图片并回调给H5页面。这样，用户可以方便地上传并在前端预览所选图片。随着技术的发展，H5与原生应用的结合将变得更加紧密，为开发者提供更多可能。
