在Android中，WebView中的<file>标签不能上传文件的解析

WebView中file标签不能上传文件

本文主要是从以下几点对这个问题进行了阐释：

• 简述
• 如何在Andorid设置中用webview来识别file标签的呢
• 实例代码

---

简述

 Android WebView在Android平台上是一个特殊的View， 他能用来显示网页，这个类可以被用来在你的app中仅仅显示一张在线的网页，还可以用来开发浏览器。WebView内部实现是采用渲染引擎来展示view的内容，提供网页前进后退，网页放大，缩小，搜索，前端开发者可以使用web inspector(Android 4.4系统支持，4.4一下可以采用http://developer.android.com/guide/webapps/debugging.html)调试HTML,CSS,JavaScript等等功能。在Android 4.3系统及其一下WebView内部采用Webkit渲染引擎，在Android 4.4采用chromium 渲染引擎来渲染View的内容。
 WebView的好处：
 1.用它加载网页数据
 2.Html与java交互
 3.等等（扯淡了。。。）

WebView识别file标签

为什么WebView不能直接识别file标签呢？

在webview中加载web网页，当设计到用户处罚的web点击事件，都需要去调用响应的事件处理js来处理。在pc上，js是可以直接调用window的，因为浏览器具有window的所有权，所以可以直接访问，而在移动端，js对window窗体是不具有控制权的，所以就需要有一个调用接口，来触发。那么？到底有没有这个调用交互接口呢？我查阅了网上的资料发现，webview的setWebChromeClient这个属性可以在webview 和 js之间行成对接，通过WebChromeClient接口可以监听js处理的事件过程，因此，我们只需要在这个里面找答案即可。

怎么去使用WebChromeClient的监听点击的file事件呢？

webView的setWebChromeClient的这个方法需要传入一个WebChromeClient对象，查阅发现WebChromeClient这个对象有几个和文件上传有关的监听方法，如下表所示：

方法名	描述
openFileChooser	在Android5.0之前对文件处理的方法
onShowFileChooser	在Android5.0之后对文件处理的方法

详细信息请看下方代码:

 //扩展浏览器上传文件
            //3.0++版本
            public void openFileChooser(ValueCallback<Uri> uploadMsg,       String acceptType) {
                    openFileChooserImpl(uploadMsg);
               }

            //3.0--版本
            public void openFileChooser(ValueCallback<Uri> uploadMsg) {
                openFileChooserImpl(uploadMsg);
            }

            public void openFileChooser(ValueCallback<Uri> uploadMsg, String acceptType, String capture) {
                openFileChooserImpl(uploadMsg);
            }

            // For Android > 5.0
            public boolean onShowFileChooser(WebView webView, ValueCallback<Uri[]> uploadMsg, WebChromeClient.FileChooserParams fileChooserParams) {
                openFileChooserImplForAndroid5(uploadMsg);
                return true;
            }

也就是说无论是哪个版本的方法，在用户触发file的点击事件的时候，都会调用上面对应的方法，那么我们就可以通过上面的方法去调用系统的相册，或者调用相机做后续的图片上传处理了。

实例代码

public class Main3Activity extends AppCompatActivity implements View.OnClickListener {

private WebView wv_web;
public final static int FILECHOOSER_RESULTCODE = 1;
public final static int FILECHOOSER_RESULTCODE_FOR_ANDORID_5 = 2;
public ValueCallback<Uri> mUploadMessage;
public ValueCallback<Uri[]> mUploadMessageForAndroid5;
private String mCameraFilePath;
private View view;
private AlertDialog dialog;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main3);
    view = LayoutInflater.from(this).inflate(R.layout.dialog_select,null);
    view.findViewById(R.id.btn1Id).setOnClickListener(this);

    view.findViewById(R.id.btn2Id).setOnClickListener(this);

    dialog = new AlertDialog.Builder(this)
            .setTitle("请选择方式")
            .setView(view)
            .setCancelable(false)
            .create();
    wv_web = ((WebView) findViewById(R.id.webViewId));
    initWebView();
}

private void initWebView() {
    wv_web.getSettings().setJavaScriptEnabled(true);
    wv_web.getSettings().setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);
    wv_web.getSettings().setSupportZoom(true);
    wv_web.getSettings().setUseWideViewPort(true);
    wv_web.setInitialScale(80);//100%显示
    wv_web.getSettings().setBuiltInZoomControls(true);
    wv_web.getSettings().setDomStorageEnabled(true);
    //不显示webview缩放按钮
    wv_web.getSettings().setDisplayZoomControls(false);
    wv_web.setWebViewClient(new WebViewClient() {
        @Override
        public void onPageFinished(WebView view, String url) {
            super.onPageFinished(view, url);
        }

        @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) {
            view.loadUrl(url);
            return true;
        }
    });
    wv_web.setWebChromeClient(new WebChromeClient() {


        //扩展支持alert事件
        @Override
        public boolean onJsAlert(WebView view, String url, String message,
                                 JsResult result) {
            return true;
        }

        //扩展浏览器上传文件
        //3.0++版本
        public void openFileChooser(ValueCallback<Uri> uploadMsg, String acceptType) {
            openFileChooserImpl(uploadMsg);
        }

        //3.0--版本
        public void openFileChooser(ValueCallback<Uri> uploadMsg) {
            openFileChooserImpl(uploadMsg);
        }

        public void openFileChooser(ValueCallback<Uri> uploadMsg, String acceptType, String capture) {
            openFileChooserImpl(uploadMsg);
        }

        // For Android > 5.0
        public boolean onShowFileChooser(WebView webView, ValueCallback<Uri[]> uploadMsg, WebChromeClient.FileChooserParams fileChooserParams) {
            openFileChooserImplForAndroid5(uploadMsg);
            return true;
        }

        @Override
        public void onProgressChanged(WebView view, int newProgress) {
            super.onProgressChanged(view, newProgress);

        }
    });
    wv_web.loadUrl(".............");
}

int platformVersion;

private void openFileChooserImpl(ValueCallback<Uri> uploadMsg) {
    mUploadMessage = uploadMsg;

    platformVersion = FILECHOOSER_RESULTCODE;

    dialog.show();
}
private void openFileChooserImplForAndroid5(ValueCallback<Uri[]> uploadMsg) {
    mUploadMessageForAndroid5 = uploadMsg;

    platformVersion = FILECHOOSER_RESULTCODE_FOR_ANDORID_5;

    dialog.show();

}

@Override
protected void onPause() {
    super.onPause();
    wv_web.onPause();
}

@Override
protected void onResume() {
    super.onResume();
    wv_web.requestFocus();
    wv_web.onResume();
}
@Override
public void onActivityResult(int requestCode, int resultCode, Intent intent) {
    Log.i("infozt","调用了");
    if (requestCode == FILECHOOSER_RESULTCODE) {
        if (null == mUploadMessage)
            return;
        Uri result = intent == null || resultCode != RESULT_OK ? null : intent.getData();
        if(result!=null)
        {
            mUploadMessage.onReceiveValue(result);
        }
        else
        {
            mUploadMessage.onReceiveValue(null);
        }
        if(mCameraFilePath!=null)
        {
            Uri uri = Uri.fromFile(new File(mCameraFilePath));
            mUploadMessage.onReceiveValue(result);
        }
        else
        {
            mUploadMessage.onReceiveValue(null);
        }
        mUploadMessage = null;

    } else if (requestCode == FILECHOOSER_RESULTCODE_FOR_ANDORID_5) {
        if (null == mUploadMessageForAndroid5)
            return;
        Uri uri=null;
        if(mCameraFilePath!=null)
        {
            uri = Uri.fromFile(new File(mCameraFilePath));
            mUploadMessageForAndroid5.onReceiveValue(new Uri[]{uri});
        }
        else
        {
            Uri result = (intent == null || resultCode != RESULT_OK) ? null : intent.getData();
            if (result != null) {
                mUploadMessageForAndroid5.onReceiveValue(new Uri[]{result});
            }else
            {
                mUploadMessageForAndroid5.onReceiveValue(null);
            }
        }
        mUploadMessageForAndroid5 = null;
    }
    mCameraFilePath = null;

}

@SuppressWarnings("static-access")
private Intent createCameraIntent() {

    Intent cameraIntent = new Intent(MediaStore.ACTION_IMAGE_CAPTURE);

    File externalDataDir = Environment

            .getExternalStoragePublicDirectory(Environment.DIRECTORY_DCIM);

    File cameraDataDir = new File(externalDataDir.getAbsolutePath()

            + File.separator + "515aaa");

    cameraDataDir.mkdirs();

    String mCameraFilePath = cameraDataDir.getAbsolutePath()

            + File.separator + System.currentTimeMillis() + ".jpg";

    this.mCameraFilePath = mCameraFilePath;

    cameraIntent.putExtra(MediaStore.Images.Media.ORIENTATION, 0);

    cameraIntent.putExtra(MediaStore.EXTRA_OUTPUT,

            Uri.fromFile(new File(mCameraFilePath)));

    return cameraIntent;
}
@Override
public void onClick(View v) {
    dialog.hide();
    Intent contentSelectionIntent = new Intent(Intent.ACTION_GET_CONTENT);
    contentSelectionIntent.addCategory(Intent.CATEGORY_OPENABLE);
    contentSelectionIntent.setType("image/*");
    Intent chooserIntent = null;
    switch (v.getId()) {
        case R.id.btn1Id:
            chooserIntent = createCameraIntent();
            break;
        case R.id.btn2Id:
            chooserIntent = new Intent(Intent.ACTION_CHOOSER);
            break;
    }
    chooserIntent.putExtra(Intent.EXTRA_INTENT, contentSelectionIntent);
    chooserIntent.putExtra(Intent.EXTRA_TITLE, "Image Chooser");
    startActivityForResult(chooserIntent, platformVersion);
}