Android：让WebView支持<input type=”file”…>元素

最近在做一个活动页面：用户上传一张图片进行缩放、旋转后点击下一步填写内容后生成图片！

做好后经过各种测试是没有问题的，基本没有什么明显BUG，流程都能走通，但是嵌入到APP后，问题就来了！

在IOS上基本还可以，在Android上有明显问题，下面就是我要讲的：

在Android中，当我们通过WebView打开一个页面时，如果里面有元素是<input type=”file”…>类型的，WebView只能正常的显示样式，但是是无法点击的。要解决这个问题，我们需要重写WebChromeClient。

下面直接给出Demo代码：

Activity文件：

public class MainActivity extends Activity {

private final String host = "demo.com";
private final String urlAddress = "http://" + host;

private WebView web;
private ProgressBar progressBar;

private ValueCallback<Uri> mUploadMessage;
private final static int FILECHOOSER_RESULTCODE = 1;

@Override
protected void onActivityResult(int requestCode, int resultCode,
Intent intent) {
if (requestCode == FILECHOOSER_RESULTCODE) {
if (null == mUploadMessage) return;
Uri result = intent == null || resultCode != RESULT_OK ? null
: intent.getData();
mUploadMessage.onReceiveValue(result);
mUploadMessage = null;
}
}

/**
* Called when the activity is first created.
*/
@SuppressLint("SetJavaScriptEnabled")
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);

web = (WebView) findViewById(R.id.webView1);
progressBar = (ProgressBar) findViewById(R.id.progressBar1);

WebSettings settings = web.getSettings();
settings.setJavaScriptEnabled(true);
web.loadUrl(urlAddress);
web.setWebViewClient(new MyWebViewClient());

web.setWebChromeClient(new WebChromeClient() {
//关键代码，以下函数是没有API文档的，所以在Eclipse中会报错，如果添加了@Override关键字在这里的话。

// For Android 3.0+
public void openFileChooser(ValueCallback<Uri> uploadMsg) {

mUploadMessage = uploadMsg;
Intent i = new Intent(Intent.ACTION_GET_CONTENT);
i.addCategory(Intent.CATEGORY_OPENABLE);
i.setType("image/*");
MainActivity.this.startActivityForResult(Intent.createChooser(i, "File Chooser"), FILECHOOSER_RESULTCODE);

}

// For Android 3.0+
public void openFileChooser(ValueCallback uploadMsg, String acceptType) {
mUploadMessage = uploadMsg;
Intent i = new Intent(Intent.ACTION_GET_CONTENT);
i.addCategory(Intent.CATEGORY_OPENABLE);
i.setType("*/*");
MainActivity.this.startActivityForResult(
Intent.createChooser(i, "File Browser"),
FILECHOOSER_RESULTCODE);
}

//For Android 4.1
public void openFileChooser(ValueCallback<Uri> uploadMsg, String acceptType, String capture) {
mUploadMessage = uploadMsg;
Intent i = new Intent(Intent.ACTION_GET_CONTENT);
i.addCategory(Intent.CATEGORY_OPENABLE);
i.setType("image/*");
MainActivity.this.startActivityForResult(Intent.createChooser(i, "File Chooser"), MainActivity.FILECHOOSER_RESULTCODE);

}
});

//        setContentView(web);
}

private class MyWebViewClient extends WebViewClient {
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
if (Uri.parse(url).getHost().equals(host)) {
// This is my web site, so do not override; let my WebView load the page
return false;
}
// Otherwise, the link is not for a page on my site, so launch another Activity that handles URLs
Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(url));
startActivity(intent);
return true;
}

@Override
public void onPageStarted(WebView view, String url, Bitmap favicon) {
// TODO Auto-generated method stub
super.onPageStarted(view, url, favicon);
}

@Override
public void onPageFinished(WebView view, String url) {
// TODO Auto-generated method stub
super.onPageFinished(view, url);

progressBar.setVisibility(View.GONE);
}
}

//flipscreen not loading again
@Override
public void onConfigurationChanged(Configuration newConfig) {
super.onConfigurationChanged(newConfig);
}

// 捕捉“回退”按键，让WebView能回退到上一页，而不是直接关闭Activity。
@Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
if ((keyCode == KeyEvent.KEYCODE_BACK) && web.canGoBack()) {
web.goBack();
return true;
}
return super.onKeyDown(keyCode, event);
}
}

Layout代码就不贴出来了，就是很简单的一个WebView和一个Progress。通过以上代码，我们就能够在WebView中上传文件了。

PS: 和iOS比起来，这不是一个完美的解决方案，因为它不支持直接拍照上传文件，如果需要这个功能的话，那么还需要做进一步的开发才行。

原文地址：Android：让WebView支持input: file元素