Android WebView processing h5 open local file browser features

Source: Internet
Author: User

This week encountered a tricky problem, need to integrate the H5 page on Android, and on the H5 page, users can upload photos of the local Android, at first I thought WebView would automatically dispose of, so I did not pay attention, when the real integration, only to find that H5 interface upload pictures can not open the local Android library, the way H5 is called:

<input type = "File"/>

Through the simplest input menu to choose, so I Baidu a wave, found two better solutions, one is h5 to write JS code, call the Android app to implement the function, to open the library for image selection function, there is another way is, The ability to open the local library is implemented by overriding the Webchromeclient class in WebView.

Here we mainly describe the implementation of the second method.

I'll put the rewritten code first:

public class Openfilewebchromeclient extends Webchromeclient {public String TAG = "Openfilewebchromeclient";    public static final int request_file_picker = 1;    Public valuecallback<uri> Mfilepathcallback;    Public valuecallback<uri[]> mfilepathcallbacks;    Private Activity Mcontext;    Private TextView TextView;        Public openfilewebchromeclient (Activity mcontext) {super ();    This.mcontext = Mcontext;        }/** * Android < 3.0 Call this method */public void Openfilechooser (valuecallback<uri> filepathcallback) {        Mfilepathcallback = Filepathcallback;        Intent Intent = new Intent (intent.action_get_content);        Intent.addcategory (intent.category_openable);        Intent.settype ("image/*");    Mcontext.startactivityforresult (Intent.createchooser (Intent, "File Chooser"), Request_file_picker);                   }/** * 3.0 + Call this method */public void Openfilechooser (Valuecallback filepathcallback,             String accepttype) {mfilepathcallback = Filepathcallback;        Intent Intent = new Intent (intent.action_get_content);        Intent.addcategory (intent.category_openable);        Intent.settype ("image/*");    Mcontext.startactivityforresult (Intent.createchooser (Intent, "File Chooser"), Request_file_picker); }/** * js upload file <input type= "file" Name= "Filefield" id= "Filefield"/> Event capture *//** * Android > 4.1                                .1 Call this method */@Deprecated public void Openfilechooser (Valuecallback<uri> filepathcallback,        String Accepttype, String capture) {mfilepathcallback = Filepathcallback;        Intent Intent = new Intent (intent.action_get_content);        Intent.addcategory (intent.category_openable);        Intent.settype ("image/*");    Mcontext.startactivityforresult (Intent.createchooser (Intent, "File Chooser"), Request_file_picker); } @Override Public Boolean Onshowfilechooser (WebView WebView, valuecallback<uri[]> Filepathcallback, Webchromeclient.filechooserparams filechooserparams) {mfilepathcallbacks = FilePath        Callback;        Intent Intent = new Intent (intent.action_get_content);        Intent.addcategory (intent.category_openable);        Intent.settype ("image/*");        Mcontext.startactivityforresult (Intent.createchooser (Intent, "File Chooser"), Request_file_picker);    return true; }}

This can open the local library, of course, this is only able to open, and then how to return the selected image to the H5 page?

The following code needs to be implemented in the activity:

    @Override public void Onactivityresult (int requestcode, int resultcode, Intent Intent) {if (Requestcode = =                Openfilewebchromeclient.request_file_picker) {if (mopenfilewebchromeclient.mfilepathcallback! = null) { Uri result = Intent = = NULL | | ResultCode! = ACTIVITY.RESULT_OK?                Null:intent.getData ();                            if (result = null) {String path = Mediautility.getpath (Getapplicationcontext (),                    result);                    Uri uri = uri.fromfile (new File);                Mopenfilewebchromeclient.mfilepathcallback. Onreceivevalue (URI);                } else {mopenfilewebchromeclient.mfilepathcallback. Onreceivevalue (NULL); }} if (mopenfilewebchromeclient.mfilepathcallbacks! = null) {Uri ResU lt = Intent = = NULL | | ResultCode! = Activity.result_ok?                Null:intent.getData ();                            if (result = null) {String path = Mediautility.getpath (Getapplicationcontext (),                    result);                    Uri uri = uri.fromfile (new File);                Mopenfilewebchromeclient.mfilepathcallbacks. Onreceivevalue (New uri[] {Uri});                 } else {mopenfilewebchromeclient.mfilepathcallbacks. Onreceivevalue (NULL);            }} mopenfilewebchromeclient.mfilepathcallback = null;        Mopenfilewebchromeclient.mfilepathcallbacks = null; }    }

In this way, the data returned is the data required by the H5 page, so that the H5 can be like on the computer, the return of the data to operate, can be real-time preview, upload and other functions.

But for the above method, we found in the test, On the android4.4 is not supported, the reason is that the android4.4 WebView did not do any processing onshowfilechooser and openfilechooser, so does not support, this is a pit on Android.

Finally, remember to add permissions, because you want to read the local picture, so to get the reader to sdcard permissions!

  

Android WebView processing h5 open local file browser features

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.