Webview 支持文件上传

最新推荐文章于 2024-03-11 16:37:23 发布
最新推荐文章于 2024-03-11 16:37:23 发布
阅读量179 收藏
点赞数
文章标签： 移动开发 开发工具 前端 ViewUI
默认情况下情况下， 在一个带有input tpye=file标签的Html页面， 使用 Android的WebView是不能够支持上传文件的 （在iOS和微信上完全正常工作） 。而这个，也是在我们的前端工程师告知之后才了解的。因为Android的每个版本WebView的实现有差异，因此需要对不同版本去适配。

主要思路是重写WebChromeClient，然后在Activity中接收选择到的文件Uri，传给页面去上传就可以了。

由于不同版本的差别，Android 5.0以下的版本，ValueCallback 的onReceiveValue接收的参数类型是 Uri, 5.0及以上版本接收的是 Uri数组，在传值的时候需要注意。
选择文件会使用系统提供的组件或者其他支持的app，返回的uri有的直接是文件的url，有的是contentprovider的uri，因此我们需要统一处理一下，转成文件的uri。
调用getPath可以将Uri转成真实文件的Path，然后可以自己生成文件的Uri

WebView设置WebChromeClient

重写WebChromeClient中关于文件选择的方法，onShowFileChooser和openFileChooser。(项目中只需要选择图片，所以加上了图片过滤。)
    private WebChromeClient mWebChromeClient = new WebChromeClient() {
        // android 5.0 这里需要使用android5.0 sdk
        public boolean onShowFileChooser(WebView webView, ValueCallback<Uri[]> filePathCallback, WebChromeClient.FileChooserParams fileChooserParams) {
            if (mFilePathCallback != null) mFilePathCallback.onReceiveValue(null);
            mFilePathCallback = filePathCallback;
            /** 
            Open Declaration   String android.provider.MediaStore.ACTION_IMAGE_CAPTURE = "android.media.action.IMAGE_CAPTURE" 
            Standard Intent action that can be sent to have the camera application capture an image and return it.  
            The caller may pass an extra EXTRA_OUTPUT to control where this image will be written.
             If the EXTRA_OUTPUT is not present, then a small sized image is returned as a Bitmap object in the extra field. 
             This is useful for applications that only need a small image. 
             If the EXTRA_OUTPUT is present, then the full-sized image will be written to the Uri value of EXTRA_OUTPUT. 
             As of android.os.Build.VERSION_CODES.LOLLIPOP, this uri can also be supplied through android.content.Intent.setClipData(ClipData).
             If using this approach, you still must supply the uri through the EXTRA_OUTPUT field for compatibility with old applications.
             If you don't set a ClipData, it will be copied there for you when calling Context.startActivity(Intent). 
            See Also:EXTRA_OUTPUT 
            标准意图，被发送到相机应用程序捕获一个图像，并返回它。通过一个额外的extra_output控制这个图像将被写入。如果extra_output是不存在的， 
            那么一个小尺寸的图像作为位图对象返回。如果extra_output是存在的，那么全尺寸的图像将被写入extra_output URI值。 
             */
            Intent takePictureIntent = new Intent(MediaStore.ACTION_IMAGE_CAPTURE);
            if (takePictureIntent.resolveActivity(getPackageManager()) != null) {
                File photoFile = null;// Create the File where the photo should go  
                try {
                    //设置MediaStore.EXTRA_OUTPUT路径，相机拍照写入的全路径  
                    photoFile = createImageFile();
                    takePictureIntent.putExtra("PhotoPath", mCameraPhotoPath);
                } catch (Exception ex) {
                    // Error occurred while creating the File 
                    Log.e("WebViewSetting", "Unable to create Image File", ex);
                }
                // Continue only if the File was successfully created  
                if (photoFile != null) {
                    mCameraPhotoPath = "file:" + photoFile.getAbsolutePath();
                    takePictureIntent.putExtra(MediaStore.EXTRA_OUTPUT, Uri.fromFile(photoFile));
                    System.out.println(mCameraPhotoPath);
                } else {
                    takePictureIntent = null;
                }
            }
            Intent contentSelectionIntent = new Intent(Intent.ACTION_GET_CONTENT);
            contentSelectionIntent.addCategory(Intent.CATEGORY_OPENABLE);
            contentSelectionIntent.setType("image/*");
            Intent[] intentArray;
            if (takePictureIntent != null) {
                intentArray = new Intent[] { takePictureIntent };
                System.out.println(takePictureIntent);
            } else {
                intentArray = new Intent[0];
            }
            Intent chooserIntent = new Intent(Intent.ACTION_CHOOSER);
            chooserIntent.putExtra(Intent.EXTRA_INTENT, contentSelectionIntent);
            chooserIntent.putExtra(Intent.EXTRA_TITLE, "Image Chooser");
            chooserIntent.putExtra(Intent.EXTRA_INITIAL_INTENTS, intentArray);
            startActivityForResult(chooserIntent, INPUT_FILE_REQUEST_CODE);
            return true;
        }
        //The undocumented magic method override  
        //Eclipse will swear at you if you try to put @Override here  
        // For Android 3.0+  
        @SuppressWarnings("unused")
        public void openFileChooser(ValueCallback<Uri> uploadMsg) {
            Log.d("bqt", "openFileChooser1");
            mUploadMessage = uploadMsg;
            Intent i = new Intent(Intent.ACTION_GET_CONTENT);
            i.addCategory(Intent.CATEGORY_OPENABLE);
            i.setType("image/*");
            WebViewActivity.this.startActivityForResult(Intent.createChooser(i, "Image Chooser"), FILECHOOSER_RESULTCODE);
        }
        // For Android 3.0+  
        @SuppressWarnings("unused")
        public void openFileChooser(ValueCallback uploadMsg, String acceptType) {
            Log.d("bqt", "openFileChooser2");
            mUploadMessage = uploadMsg;
            Intent i = new Intent(Intent.ACTION_GET_CONTENT);
            i.addCategory(Intent.CATEGORY_OPENABLE);
            i.setType("image/*");
            WebViewActivity.this.startActivityForResult(Intent.createChooser(i, "Image Chooser"), FILECHOOSER_RESULTCODE);
        }
        //For Android 4.1  
        @SuppressWarnings("unused")
        public void openFileChooser(ValueCallback<Uri> uploadMsg, String acceptType, String capture) {
            Log.d("bqt", "openFileChooser3");
            mUploadMessage = uploadMsg;
            Intent i = new Intent(Intent.ACTION_GET_CONTENT);
            i.addCategory(Intent.CATEGORY_OPENABLE);
            i.setType("image/*");
            WebViewActivity.this.startActivityForResult(Intent.createChooser(i, "Image Chooser"), WebViewActivity.FILECHOOSER_RESULTCODE);
        }
    };

选择结果的回调

在onActivityResult中获取对应的选取文件的返回结果
public void onActivityResult(int requestCode, int resultCode, Intent data) {
        if (requestCode == FILECHOOSER_RESULTCODE) {
            if (null == mUploadMessage) return;
            Uri result = data == null || resultCode != RESULT_OK ? null : data.getData();
            if (result != null) {
                String imagePath = ImageFilePath.getPath(this, result);
                if (!TextUtils.isEmpty(imagePath)) result = Uri.parse("file:///" + imagePath);
            }
            mUploadMessage.onReceiveValue(result);
            mUploadMessage = null;
        } else if (requestCode == INPUT_FILE_REQUEST_CODE && mFilePathCallback != null) {
            // 5.0的回调  
            Uri[] results = null;
            if (resultCode == Activity.RESULT_OK) {
                if (data == null) {
                    // If there is not data, then we may have taken a photo  
                    if (mCameraPhotoPath != null) results = new Uri[] { Uri.parse(mCameraPhotoPath) };
                } else {
                    String dataString = data.getDataString();
                    if (dataString != null) results = new Uri[] { Uri.parse(dataString) };
                }
            }
            mFilePathCallback.onReceiveValue(results);
            mFilePathCallback = null;
        } else {
            super.onActivityResult(requestCode, resultCode, data);
        }
    }

文件路径的获取

返回文件的解析，因为html页面需要的是文件，所以客户端需要返回的是对应文件的路径。这样，就会存在一个问题，在Android 4.4上，通过文件选择返回的结果都是对应以content开头格式的对应的路径。这就得需要咱们来进行判断，最终都需要转回成以file开头对应的格式文件。下面，我封装成了一个ImageFilePath的类，通过调用getPath方法来获取最终的结果。这个类的方法如下：
public class ImageFilePath {
    /**
    * Method for return file path of Gallery image
    */
    public static String getPath(final Context context, final Uri uri) {
        // check here to KITKAT or new version
        boolean isKitKat = Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT;
        // DocumentProvider
        if (isKitKat && DocumentsContract.isDocumentUri(context, uri)) {
            // ExternalStorageProvider
            if (isExternalStorageDocument(uri)) {
                String docId = DocumentsContract.getDocumentId(uri);
                String[] split = docId.split(":");
                String type = split[0];
                if ("primary".equalsIgnoreCase(type)) return Environment.getExternalStorageDirectory() + "/" + split[1];
            }
            // DownloadsProvider
            else if (isDownloadsDocument(uri)) {
                String id = DocumentsContract.getDocumentId(uri);
                Uri contentUri = ContentUris.withAppendedId(Uri.parse("content://downloads/public_downloads"), Long.valueOf(id));
                return getDataColumn(context, contentUri, null, null);
            }
            // MediaProvider
            else if (isMediaDocument(uri)) {
                String docId = DocumentsContract.getDocumentId(uri);
                String[] split = docId.split(":");
                String type = split[0];
                Uri contentUri = null;
                if ("image".equals(type)) contentUri = MediaStore.Images.Media.EXTERNAL_CONTENT_URI;
                else if ("video".equals(type)) contentUri = MediaStore.Video.Media.EXTERNAL_CONTENT_URI;
                else if ("audio".equals(type)) contentUri = MediaStore.Audio.Media.EXTERNAL_CONTENT_URI;
                String selection = "_id=?";
                String[] selectionArgs = new String[] { split[1] };
                return getDataColumn(context, contentUri, selection, selectionArgs);
            }
        }
        // MediaStore (and general)
        else if ("content".equalsIgnoreCase(uri.getScheme())) {
            // Return the remote address
            if (isGooglePhotosUri(uri)) return uri.getLastPathSegment();
            return getDataColumn(context, uri, null, null);
        }
        // File
        else if ("file".equalsIgnoreCase(uri.getScheme())) return uri.getPath();
        return null;
    }
    /**
     * Get the value of the data column for this Uri. This is useful for MediaStore Uris, and other file-based ContentProviders.
     * @param context   The context.
     * @param uri The Uri to query.
     * @param selection   (Optional) Filter used in the query.
     * @param selectionArgs (Optional) Selection arguments used in the query.
     * @return The value of the _data column, which is typically a file path.
     */
    public static String getDataColumn(Context context, Uri uri, String selection, String[] selectionArgs) {
        Cursor cursor = null;
        String column = "_data";
        String[] projection = { column };
        try {
            cursor = context.getContentResolver().query(uri, projection, selection, selectionArgs, null);
            if (cursor != null && cursor.moveToFirst()) {
                int index = cursor.getColumnIndexOrThrow(column);
                return cursor.getString(index);
            }
        } finally {
            if (cursor != null) cursor.close();
        }
        return null;
    }
    public static boolean isExternalStorageDocument(Uri uri) {
        return "com.android.externalstorage.documents".equals(uri.getAuthority());
    }
    public static boolean isDownloadsDocument(Uri uri) {
        return "com.android.providers.downloads.documents".equals(uri.getAuthority());
    }
    public static boolean isMediaDocument(Uri uri) {
        return "com.android.providers.media.documents".equals(uri.getAuthority());
    }
    public static boolean isGooglePhotosUri(Uri uri) {
        return "com.google.android.apps.photos.content".equals(uri.getAuthority());
    }
}





附件列表

 

weixin_33709219
关注
Android WebView中文件上传功能的实现
ScriptCharm的博客
09-27 1065
在该方法中，我们首先检查之前的文件上传回调是否已存在，如果存在，则取消之前的回调。如果是，我们首先检查fileUploadCallback是否存在，如果存在，则获取文件选择器返回的结果，并通过fileUploadCallback.onReceiveValue()方法将结果传递给WebView。通过以上步骤，我们就实现了在Android应用的WebView中支持文件上传的功能。在网页中，当用户点击文件上传按钮时，将会启动文件选择器，用户可以选择本地文件进行上传操作。如果你有任何问题，请随时提问。
ios UIWebView 加载网页、文件、 html
西北风的专栏
11-12 1322
http://blog.csdn.net/codywangziham01/article/details/37658399 UIWebView  是用来加载加载网页数据的一个框。UIWebView可以用来加载pdf word doc 等等文件 生成webview 有两种方法，1、通过storyboard 拖拽 2、通过alloc init 来初始化 创建webview，下列文
WebView上传文件
Android学习之路
06-23 370
android webview本身不支持文件上传，因此我们需要重写webview的WebChromeClient，对其中的onShowFileChooser（高版本会调用这个）和openFileChooser（低版本会调用这个）做相应处理，先上代码： public class MyChromeClient extends WebChromeClient { private UrlActivi
测试WebView的文件上传
最新发布
Android菜鸟的专栏
03-11 641
但是这个方式呢，就只能是从文件管理器中选择，不会使用设备实时捕获的，而且多选也是没有的，只有单选。创建的文件选择器效果不是很理想，所以要想实现比较好的文件选择效果的话需要自己去实现了，但是比较麻烦，所以可以使用一些第三方的库，比如。不过公司项目没有要求那么细，我也就懒得去找更好的实现，将就着用吧。这里加了一段js，用于把选择的图片展示出来。标签中的属性来测试Android上的文件选择效果。就表示多选，不需要赋值，不写这个就是单选，而且也是没有多选的，不管你是否设置了。经测试好像也一样，只要写了它，则。
安卓webview上传文件
积跬步，成千里。
06-29 1057
后端jsp 客户端 @Override public boolean onShowFileChooser(WebView webView, ValueCallback&amp;amp;amp;lt;Uri[]&amp;amp;amp;gt; filePathCallback, WebChromeClient.FileChooserParams fileChooserParams) { ...
Android WebView 上传文件支持全解析
09-02
然而，默认情况下，Android的WebView并不直接支持文件上传功能。为了实现这个功能，开发者需要进行一些额外的配置和处理。本篇文章将全面解析如何在Android WebView中实现上传文件的支持。 首先，我们需要明白为...
解决RN 的 webview 组件不支持android客户端上传图片文件问题
03-23
React Native的`<WebView>`组件在Android上默认并不支持文件选择器，因此，当HTML中的表单尝试通过`<input type="file">`标签选择本地图片时，用户可能无法看到文件选择对话框或者无法正常上传。 要解决这个问题，...
Android中的webview支持页面中的文件上传实例代码
08-31
为了让WebView支持文件上传，开发者需要通过编写特定的代码来处理文件选择功能。这涉及到几个关键的类和方法：WebChromeClient、ValueCallback以及Intent。WebChromeClient是WebView的一个辅助类，用于辅助WebView...
Android 解决WebView无法上传文件的问题
08-30
其中，uploadMessageAboveL 和 uploadMessage 是两个 ValueCallback 对象，用于处理文件上传请求；FILE_CHOOSER_RESULT_CODE 是一个静态常量，用于标识文件选择器的请求代码。 接下来，我们需要重写 Activity 的...
android webview上传文件
01-02
android webview上传文件 上传图片 提交图片 包含服务端源码和android端源码
android使用webview上传文件兼容问题解决支持5.0以上系统
07-20
android使用webview上传文件兼容问题解决，兼容5.0以上系统
AJAX Upload兼容ios和android的webview
09-10
addEvent(input, 'click', function(){//ios and android addClass(self._button, self._settings.focusClass); }); 全兼容的事件；touchstart兼容IOS
Andriod webview实现文件上传
gzxin的专栏
01-09 475
Andriod 到3.2版本为止，webview方式下使用点击后都没有反应。实际上顶层是有隐含的接口没实现的，可以自己重写这个方法来实现。以phonegap为例： public class App extends DroidGap {     private ValueCallback mUploadMessage;     private final static int FILE
android WebView的网页上传文件
cao_zhi_qing的专栏
10-09 517
android WebView 网页上传文件（图片资源等） 网页访问本地资源有两种方法：1可以通过js互调，原生代码提供对应的方法；2网页中标签，访问本地资源。本文主要讲的就是2 。 具体代码（以Webview在Activity中为列） ValueCallback<Uri[]> mUploadMessages; ValueCallback<Uri> mUploadMessage; i
autojs-webview上传文件
snailuncle2的博客
12-15 3364
牙叔教程 简单易懂 思路 上传文件, 自然有服务器和客户端, 恰好autojs支持nodejs, 又支持webview, 所以下面的代码都可以在autojs中直接运行. 环境 手机: Mi 11 Pro Android版本: 11 Autojs版本: 9.0.14 服务端 使用的koa, 依赖如下, 执行npm i 安装依赖 "dependencies": { "koa": "^2.13.4", "koa-body": "^4.2.0", "koa-router": "^10.
微信小程序使用webview实现文件上传功能
qq_60208156的博客
09-04 2791
解决uni.chooseMessageFile在电脑端无法获取文件问题
android WebView上传文件到服务器[android+server代码]
成长的烧年
04-01 2962
最近比较坑爹，公司app部分页面要转H5，美其名曰称之为节约人力成本，无奈，我们就从后台PHP,JQuery从零开始学起。项目中遇到这么一个问题:要从android的WebView中上传用户头像到服务器，当初感觉蛮简单的，就没怎么注意，没想到一道道大坑摆在我面前,特此记录一下。前端界面蛮丑的，这么就不说，基本上就像下图一样： 这里的加号图片，主要是美化上传用的，它还有一个作用就是图片预览功能，基本
安卓 WebView 套壳 及调用文件上传功能
一个新手小白的日常学习记录
08-15 1210
安卓 WebView 调用文件上传目录概述将网页封装进app添加 WebView 布局在入口处创建 WebView 实例添加联网权限修改网址解决webview文件上传问题 概述 在最近我做的项目中，需要做一个在手机APP中上传照片的功能，由于之前已经写好了一个上传照片的网页端，因此决定直接用webview封装我做好的网页，实现一个套壳app。 等封装成功后却遇到了一个问题，那就是在网页上功能正常的上传文件按钮到了webview里却点不动，没有什么反应，后来经过各种学习解决了这个问题。 造成这个问题的原因：
Android WebView 文件上传全面解析与适配
然而，默认情况下，Android的WebView并不直接支持文件上传功能。这个问题主要体现在，当用户尝试在WebView中点击文件上传按钮时，系统可能不会弹出文件选择器。为了解决这个问题，开发者需要对WebView进行一定的定制...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值