H5调用手机的摄像头拍照上传以及手机相册选取照片但不支持Android的分析

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

原文地址:http://blog.csdn.net/qq_16559905/article/details/52486231

语法:

  

提示:如需规定多个值,请使用逗号分隔(比如 )。  

H5调用手机的摄像头拍照上传以及手机相册选取照片但不支持Android的分析_第1张图片

    
    
    

capture表示,可以捕获到系统默认的设备,比如:camera--照相机;camcorder--摄像机;microphone--录音。
accept表示,直接打开系统文件目录。如果添加了capture属性如capture="camera"那么在iphone上只能打开摄像机,而不能选择文件,可以去除这个属性;


其实html5的input:file标签还支持一个multiple属性,表示可以支持多选,如:

加上这个multiple后,capture就没啥用了

使用步骤:

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

但是,如果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 mUploadMessage;
    public ValueCallback 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 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 uploadMsg, String acceptType) {
                openFileChooser(uploadMsg);
            }

            public void openFileChooser(ValueCallback uploadMsg, String acceptType, String capture) {
                openFileChooser(uploadMsg);
            }

            // For Lollipop 5.0+ Devices
            @TargetApi(Build.VERSION_CODES.LOLLIPOP)
            public boolean onShowFileChooser(WebView mWebView, ValueCallback 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);
    }

}



你可能感兴趣的:(H5调用手机的摄像头拍照上传以及手机相册选取照片但不支持Android的分析)