H5调用手机的摄像头拍照上传以及手机相册选取照片

系统管理员 2022-09-25 12:19 309阅读 0赞

**H5调用手机的摄像头拍照上传以及手机相册选取照片**

**语法：**

**提示：如需规定多个值，请使用逗号分隔（比如 ）。**

![这里写图片描述][20160909184245526]  
  
  
详情访问：[w3c][]

--------------------

### 使用步骤： ###

目前支持情况是比较良好的，已在各大部分浏览器测试情况比较不错。

但是，如果H5嵌套在app上android机型就出问题了，该有的功能就无任何的效果了，为什么？

安卓端要看浏览器对这个标签内两个属性的优化，部分浏览器会直接跳转到资源管理器，优化做得好的可以直接使用。

H5嵌套在了android的webview中，处于安全考虑android webview 屏蔽了 input file ，所以，需要webview进行优化方可使用。我们用H5去调用上传文件，因此需要支持这项功能。

**解决方案：**

具体可以理解为 重写webview 的WebChromeClient方法。

public class PlayActivity extends AppCompatActivity { 
    
        @Override
        protected void onDestroy() {
            super.onDestroy();
        }
    
        /** * Called when the activity is first created. */
    
        WebView web;
    
        private ValueCallback<Uri> mUploadMessage;
        public ValueCallback<Uri[]> uploadMessage;
        public static final int REQUEST_SELECT_FILE = 100;
        private final static int FILECHOOSER_RESULTCODE = 1;
    
        @Override
        protected void onActivityResult(int requestCode, int resultCode,
                                        Intent intent) {
    
            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
                if (requestCode == REQUEST_SELECT_FILE) {
                    if (uploadMessage == null)
                        return;
                    uploadMessage.onReceiveValue(WebChromeClient.FileChooserParams.parseResult(resultCode, intent));
                    uploadMessage = null;
                }
            } else if (requestCode == FILECHOOSER_RESULTCODE) {
                if (null == mUploadMessage)
                    return;
                // Use MainActivity.RESULT_OK if you're implementing WebView inside Fragment
                // Use RESULT_OK only if you're implementing WebView inside an Activity
                Uri result = intent == null || resultCode != MainActivity.RESULT_OK ? null : intent.getData();
                mUploadMessage.onReceiveValue(result);
                mUploadMessage = null;
            }
        }
    
        @Override
        public void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_play);
    
            web = (WebView) findViewById(R.id.webview01);
    
            web = new WebView(this);
            web.getSettings().setJavaScriptEnabled(true);
            web.loadUrl("http://10.0.0.82:1346/hot/7516063/A1035B1ECD35AA7F0FAE050007F01000209");
            web.setWebViewClient(new myWebClient());
            web.setWebChromeClient(new WebChromeClient() {
                //The undocumented magic method override
                //Eclipse will swear at you if you try to put @Override here
                // 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/*");
                    PlayActivity.this.startActivityForResult(Intent.createChooser(i, "File Chooser"), FILECHOOSER_RESULTCODE);
    
                }
    
                public void openFileChooser(ValueCallback<Uri> uploadMsg, String acceptType) {
                    openFileChooser(uploadMsg);
                }
    
                public void openFileChooser(ValueCallback<Uri> uploadMsg, String acceptType, String capture) {
                    openFileChooser(uploadMsg);
                }
    
                // For Lollipop 5.0+ Devices
                @TargetApi(Build.VERSION_CODES.LOLLIPOP)
                public boolean onShowFileChooser(WebView mWebView, ValueCallback<Uri[]> filePathCallback, WebChromeClient.FileChooserParams fileChooserParams) {
                    if (uploadMessage != null) {
                        uploadMessage.onReceiveValue(null);
                        uploadMessage = null;
                    }
    
                    uploadMessage = filePathCallback;
    
                    Intent intent = fileChooserParams.createIntent();
                    try {
                        startActivityForResult(intent, REQUEST_SELECT_FILE);
                    } catch (ActivityNotFoundException e) {
                        uploadMessage = null;
                        return false;
                    }
                    return true;
                }
    
    
            });
    
    
            setContentView(web);
    
    
        }
    
        public class myWebClient extends WebViewClient { 
            @Override
            public void onPageStarted(WebView view, String url, Bitmap favicon) {
                // TODO Auto-generated method stub
                super.onPageStarted(view, url, favicon);
            }
    
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                // TODO Auto-generated method stub
    
                view.loadUrl(url);
                return true;
    
            }
    
            @Override
            public void onPageFinished(WebView view, String url) {
                // TODO Auto-generated method stub
                super.onPageFinished(view, url);
    
            }
        }
    
        //flipscreen not loading again
        @Override
        public void onConfigurationChanged(Configuration newConfig) {
            super.onConfigurationChanged(newConfig);
        }
    
    }

详细，请移步[这里][Link 1]

--------------------

[20160909184245526]: /images/20220717/a2f3f6a2a76543abb994ebb9db54e523.png
[w3c]: http://www.runoob.com/tags/att-input-accept.html
[Link 1]: http://m.blog.csdn.net/article/details?id=51365191