H5调用Android图片上传功能

最新推荐文章于 2025-07-08 10:24:35 发布

转载最新推荐文章于 2025-07-08 10:24:35 发布 · 5.5k 阅读

文章标签：

#android #webview

Android/H5 专栏收录该内容

1 篇文章

订阅专栏

最近手上的项目本是全H5的，这短时间部分功能和页面要求换成android原生的，所以一直在改界面，本人基本上属于新手，很多积累的不是很多，所以做项目的时候不免会遇到不懂不会的，这时候就只能依靠网络上的各位大牛了，下面是遇到的问题，也纪念一下第一篇博客。

郑重声明：主体内容摘自网络，以供自己学习用
昨天测试测到一个上传图片的问题，H5界面内调用浏览器可以上传图片，可是在app里面却不能，依靠大牛们的脑袋，借助百度解决了问题。1、首先为什么浏览器可以，app却不行？一般页面在pc打开文件管理器是用 type=”file”的代码，而app使用webview来容纳H5界面的时候，必须设置WebChromeClient才可以2、webview的WebChromeClient要怎么用？一般使用webview的时候会对WebViewClient进行设置，但是如果你需要对对话框、网站图标、网站title、加载进度等进行操作是，需要对

 WebChromeClient进行设置，具体是这样：


 
 在WebView的设计中，不是什么事都要WebView类干的，有些杂事是分给其他人的，这样WebView专心干好自己的解析、渲染工作就行了。WebViewClient就是帮助WebView处理各种通知、请求事件的，具体来说包括：
 onLoadResource
onPageStart
onPageFinish
onReceiveError
onReceivedHttpAuthRequest
 WebChromeClient主要辅助WebView处理JavaScript的对话框、网站图标、网站title、加载进度等比如
 onCloseWindow(关闭WebView)
onCreateWindow()
onJsAlert (WebView上alert无效，需要定制WebChromeClient处理弹出)
onJsPrompt
onJsConfirm
onProgressChanged
onReceivedIcon
onReceivedTitle


 3、具体代码如下：


 
 @Bind(R.id.web_main)
WebView webView;

private OpenFileWebChromeClient mOpenFileWebChromeClient = new OpenFileWebChromeClient(this);

webView.setWebChromeClient(mOpenFileWebChromeClient);

public class OpenFileWebChromeClient extends WebChromeClient {
    public static final int REQUEST_FILE_PICKER = 1;
    public ValueCallback<Uri> mFilePathCallback;
    public ValueCallback<Uri[]> mFilePathCallbacks;
    Activity mContext;
    public OpenFileWebChromeClient(Activity mContext){
        super();
        this.mContext = mContext;
    }
    // Android < 3.0 调用这个方法
    public void openFileChooser(ValueCallback<Uri> filePathCallback) {
        mFilePathCallback = filePathCallback;
        Intent intent = new Intent(Intent.ACTION_GET_CONTENT);
        intent.addCategory(Intent.CATEGORY_OPENABLE);
        intent.setType("*/*");
        mContext.startActivityForResult(Intent.createChooser(intent, "File Chooser"),
                REQUEST_FILE_PICKER);
    }
    // 3.0 + 调用这个方法
    public void openFileChooser(ValueCallback filePathCallback,
                                String acceptType) {
        mFilePathCallback = filePathCallback;
        Intent intent = new Intent(Intent.ACTION_GET_CONTENT);
        intent.addCategory(Intent.CATEGORY_OPENABLE);
        intent.setType("*/*");
        mContext.startActivityForResult(Intent.createChooser(intent, "File Chooser"),
                REQUEST_FILE_PICKER);
    }
    //  / js上传文件的<input type="file" name="fileField" id="fileField" />事件捕获
    // Android > 4.1.1 调用这个方法
    public void openFileChooser(ValueCallback<Uri> filePathCallback,
                                String acceptType, String capture) {
        mFilePathCallback = filePathCallback;
        Intent intent = new Intent(Intent.ACTION_GET_CONTENT);
        intent.addCategory(Intent.CATEGORY_OPENABLE);
        intent.setType("*/*");
        mContext.startActivityForResult(Intent.createChooser(intent, "File Chooser"),
                REQUEST_FILE_PICKER);
    }

    @Override
    public boolean onShowFileChooser(WebView webView, ValueCallback<Uri[]> filePathCallback,
                                     WebChromeClient.FileChooserParams fileChooserParams) {
        mFilePathCallbacks = filePathCallback;
        Intent intent = new Intent(Intent.ACTION_GET_CONTENT);
        intent.addCategory(Intent.CATEGORY_OPENABLE);
        intent.setType("*/*");
        mContext.startActivityForResult(Intent.createChooser(intent, "File Chooser"),
                REQUEST_FILE_PICKER);
        return true;
    }
}

用Intent去调用文件管理器之后会将文件带回，用 onActivityResult来接收

@Override
protected void onActivityResult(int requestCode, int resultCode, Intent data) {
    super.onActivityResult(requestCode, resultCode, data);
    if (requestCode == OpenFileWebChromeClient.REQUEST_FILE_PICKER) {
        if (mOpenFileWebChromeClient.mFilePathCallback != null) {
            Uri result = data == null || resultCode != Activity.RESULT_OK ? null
                    : data.getData();
            if (result != null) {
                String path = MediaUtility.getPath(getApplicationContext(),
                        result);
                Uri uri = Uri.fromFile(new File(path));
                mOpenFileWebChromeClient.mFilePathCallback
                        .onReceiveValue(uri);
            } else {
                mOpenFileWebChromeClient.mFilePathCallback
                        .onReceiveValue(null);
            }
        }
        if (mOpenFileWebChromeClient.mFilePathCallbacks != null) {
            Uri result = data == null || resultCode != Activity.RESULT_OK ? null
                    : data.getData();
            if (result != null) {
                String path = MediaUtility.getPath(getApplicationContext(),
                        result);
                Uri uri = Uri.fromFile(new File(path));
                mOpenFileWebChromeClient.mFilePathCallbacks
                        .onReceiveValue(new Uri[]{uri});
            } else {
                mOpenFileWebChromeClient.mFilePathCallbacks
                        .onReceiveValue(null);
            }
        }

        mOpenFileWebChromeClient.mFilePathCallback = null;
        mOpenFileWebChromeClient.mFilePathCallbacks = null;
    }
}