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

原文地址:http://www.tuicool.com/articles/buu6ji

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

下面直接给出Demo代码:

Activity文件主要代码:

 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);

      }
    });


@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;
   }
}

在iOS中使用`<input type="file">`直接打开相册并不是一个直接的过程,因为iOS的安全机制和默认行为与Android等其他平台有所不同。以下是一些实现方法和建议: 1. **使用WKWebView**: 如果你使用的是WebView,可以通过JavaScript与原生代码交互来实现打开相册的功能。具体步骤如下: - 在Web页面中,添加一个按钮来触发文件选择。 - 在Web页面中,使用JavaScript来调用原生的方法。 - 在原生代码中,实现打开相册的功能,并将选中的图片传递给WebView。 2. **使用File Input的Accept属性**: 虽然不能直接打开相册,但可以通过设置`accept`属性来限制文件类型,从而间接引导用户选择相册中的图片。 ```html <input type="file" accept="image/*"> ``` 这样,当用户点击按钮,会直接跳转到相册,但用户需要手动选择图片。 3. **使用第三方库**: 可以使用一些第三方库来简化文件选择和上传的过程。例如,使用`cordova-plugin-file`或`cordova-plugin-camera`等插件,可以在iOS应用中更方便地实现文件选择和上传功能。 4. **自定义实现**: 如果以上方法不能满足需求,可以考虑自定义实现文件选择和上传功能。具体步骤如下: - 在iOS原生代码中,实现打开相册的功能。 - 将选中的图片保存到本地或临存储中。 - 将图片的路径或数据传递给WebView,并通过JavaScript进行后续处理。 以下是使用JavaScript与原生代码交互的示例代码: ```javascript // 在Web页面中添加一个按钮 <button onclick="openPhotoLibrary()">选择图片</button> // JavaScript函数,通过WKWebView调用原生方法 function openPhotoLibrary() { window.webkit.messageHandlers.openPhotoLibrary.postMessage(null); } // 在原生代码中,实现WKScriptMessageHandler接口 class WebViewController: UIViewController, WKScriptMessageHandler { func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) { if message.name == "openPhotoLibrary" { openPhotoLibrary() } } func openPhotoLibrary() { let picker = UIImagePickerController() picker.sourceType = .photoLibrary picker.delegate = self present(picker, animated: true, completion: nil) } } // 实现UIImagePickerControllerDelegate协议 extension WebViewController: UIImagePickerControllerDelegate, UINavigationControllerDelegate { func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [UIImagePickerController.InfoKey: Any]) { if let image = info[.originalImage] as? UIImage { // 处理选中的图片 } picker.dismiss(animated: true, completion: nil) } func imagePickerControllerDidCancel(_ picker: UIImagePickerController) { picker.dismiss(animated: true, completion: nil) } } ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值