关于webview适配H5上传照片或者视频文件的方法
程序员文章站
2022-03-03 22:46:19
关于webview适配H5上传照片或者视频文件的方法这篇文章主要介绍了关于webview适配H5上传照片或者视频文件的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学... 20-11-04...
一、需要实现的功能:
用h5实现的app中需要在h5获取手机中的照片或者视频文件上传到服务器。
二、分析实现方法:
由于不懂前端开发,不知道h5中有 input file之类的标签控件,可以用来选择文件,刚开始的思路还是想着native 端是否要通过提供inputstream流方式,将文件内容传递给js。后来和前端沟通之后,h5在电脑端都是用input 设置type为 file 来实现文件选择功能,于是才开始搜索资料,发现时需要在webview中设置 setwebchromeclient ,其中有对input 的响应回调:
三、具体实现:
前端代码
<input type="file" accept="*/*" name="choose file"> <input type="file" accept="image/*" name="choose image"> <input type="file" accept="video/*" name="choose video"> <input type="file" accept="image/example" name="take photo and upload image"> <input type="file" accept="video/example" name="take video and upload video">
native端代码:
@requiresapi(api = build.version_codes.lollipop) @override public boolean onshowfilechooser(webview webview, valuecallback<uri[]> filepathcallback, webchromeclient.filechooserparams filechooserparams) { mfilepathcallbacks = filepathcallback; // todo: 根据标签中得接收类型,启动对应的文件类型选择器 string[] accepttypes = filechooserparams.getaccepttypes(); for (string type : accepttypes) { log.d(tag, "accepttypes=" + type); } // 针对拍照后马上进入上传状态处理 if ((accepttypes.length > 0) && accepttypes[0].equals("image/example")) { log.d(tag, "onshowfilechooser takephoto"); intent it = camerafunction.takephoto(mcontext); startactivityforresult(it, take_photo_and_upload_request); return true; } // 针对录像后马上进入上传状态处理 if ((accepttypes.length > 0) && accepttypes[0].equals("video/example")) { log.d(tag, "onshowfilechooser record video"); intent it = camerafunction.recordvideo(mcontext); startactivityforresult(it, record_video_and_upload_request); return true; } intent intent = new intent(intent.action_get_content); intent.addcategory(intent.category_openable); if (accepttypes.length > 0) { if (accepttypes[0].contains("image")) { intent.settype("image/*"); } else if (accepttypes[0].contains("video")) { intent.settype("video/*"); } else { intent.settype("*/*"); } } else { intent.settype("*/*"); } webviewactivity.this.startactivityforresult(intent.createchooser(intent, "file chooser"), request_file_picker); return true; }
回调设置uri
/** * 设置input 标签出发的回调选择文件路径,优先使用path参数, * 其次使用uri参数 * @param uriparam * @param pathparam */ private void setfilepathcallback(uri uriparam, string pathparam) { //都为空,则设置null if (uriparam == null && pathparam == null) { if (mfilepathcallback != null) { mfilepathcallback.onreceivevalue(null); } if (mfilepathcallbacks != null) { mfilepathcallbacks.onreceivevalue(null); } } else if (null != pathparam) { // 优先使用path if (mfilepathcallback != null) { uri uri = uri.fromfile(new file(pathparam)); mfilepathcallback.onreceivevalue(uri); } if (mfilepathcallbacks != null) { uri uri = uri.fromfile(new file(pathparam)); mfilepathcallbacks.onreceivevalue(new uri[] { uri }); } } else if (null != uriparam) { //其次使用uri if (mfilepathcallback != null) { string path = uriutils.getpath(getapplicationcontext(), uriparam); uri uri = uri.fromfile(new file(path)); mfilepathcallback.onreceivevalue(uri); } if (mfilepathcallbacks != null) { string path = uriutils.getpath(getapplicationcontext(), uriparam); uri uri = uri.fromfile(new file(path)); mfilepathcallbacks.onreceivevalue(new uri[] { uri }); } } mfilepathcallback = null; mfilepathcallbacks = null; }
针对各个请求场景进行处理:
public void onactivityresult(int requestcode, int resultcode, intent intent) {
总结:既然用h5开发app,就需要了解前端,不懂就要问了。查询方向要对,否则南辕北辙,方向有时候比努力重要!
到此这篇关于关于webview适配h5上传照片或者视频文件的方法的文章就介绍到这了,更多相关webview适配h5上传照片内容请搜索以前的文章或继续浏览下面的相关文章,希望大家以后多多支持!
上一篇: 萌新的HTML5 入门指南