有关webv㊑iew兼容H5提交相片或是视頻文档的方式

日期：2021-01-20 类型：科技新闻我要分享

关键词：快速建站，网站建设系统，免费网页建站，网站免费建设，建站系统

一、必须完成的作用：

用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提交相片內容请检索脚本制作之家之前的文章内容或再次访问下边的有关文章内容，期待大伙儿之后多多的适用脚本制作之家！

上一篇：一文归纳㊑ CSS 多列合理布局和三列合理布局的实返回下一篇：没有了