H5 pages are embedded in android in the company project, and H5 pages need to select the function of uploading pictures. The H5 tag cannot activate the android camera and gallery functions, so it can only be processed by android. I did it for the first time, drawing on many codes on the Internet, and summarized it as follows:
We use WebView to load H5 pages, and we need to use WebView to upload files. By default, using Android 's WebView is not able to support uploading files. At this time, webView needs to set WebChromeClient and rewrite some methods, as follows:
Introduce the above method:
openFileChooser():系统未暴露的接口，因此不需要加Override的注解，同时不同版本有不同的参数.
参数：
ValueCallback: 选择完文件后，接收文件回调到网页内处理
acceptType：接受的文件mime type。
onShowFileChooser：Android 5.0之后，系统提供了来让我们实现选择文件的方法。
参数：
FileChooserParams：在该参数中，同样包括acceptType。我们可以根据acceptType，来打开系统的或者我们自己创建文件选择器。
note:
- Due to the difference between different versions, the parameter type received by the onReceiveValue of ValueCallback is Uri for versions below Android 5.0, and the Uri array is received for versions 5.0 and above. You need to pay attention when transferring values.
- Even if the obtained result is null, it must be passed to the webview, that is, mUploadMessage.onReceiveValue(null) is called directly, otherwise the web page will be blocked.
-
Selecting the file will use the components provided by the system or other supported apps. Some of the returned uris are directly the url of the file, and some are the uri of the contentprovider, so we need to process it in a unified manner and convert it into the uri of the file
-
When opening the release package, because we will be confused, we need to specifically set not to confuse the openFileChooser method in the WebChromeClient subclass. Since it is not an inherited method, it will be confused by default, and then the file cannot be selected.
The code when the H5 front-end is called:
<input capture="camera" class="upload-input" type="file" accept="image/*" οnchange="angular.element(this).scope().img_upload(this.files)"/>
Effect picture: (simulator running effect)
The real machine test is OK.
Demo download address: https://github.com/xufei5789651/UploadH5Demo
Learn as follows: