android系统webview使⽤input实现选择⽂件并预览
⼀般系统的实现⽅式：
代码实现
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>图⽚预览</title>
<script src="libs.baidu/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<p>
<img class="img" width="100" height="100" id="previewimg">
</p>
<input class="select" type="file" id="picfile">
<script>
$('.select').change(function(e) {
var _URL = window.URL || window.webkitURL;
$("#previewimg").attr("src", _ateObjectURL(this.files[0]))
})
</script>
</body>
</html>
input type="file"就是⽂件选择标签，默认样式为：
如果不喜欢默认样式，可以把它设置为透明，然后⾃⼰⽤图⽚或元素覆盖它，这时候他仍然能响应点击
opacity: 0;
multiple="multiple" 属性可以让input⼀次选择多个⽂件
注册change监听或定义onChange⽅法可以在选择完图⽚后回调，回调中使⽤files数组属性来获取选择的⽂件，如果是选择单⽂件，files[0]表⽰选择的图⽚
jquery回调中，this会⾃动指向当前操作的元素，例⼦中的this和getElementById("picfile")相对，如果要使⽤jquery⽅法，可以⽤$(this) oninput事件在元素值发⽣变化时⽴即触发， onchange在元素失去焦点时触发，如果是输⼊⽂字，oninput在输⼊过程中⼀直回调（输⼊或删除⼀个⽂字就会调⽤⼀次），onchange在输⼊完成，点击其他地⽅调⽤。
createObjectURL把file对象转为url让img标签显⽰
android系统的实现
安卓webview系统⽆法通过input打开系统选择⽂件框，必须在原⽣⾥⾯拦截webview事件，选择完⽂件，处理相关逻辑（⽐如上传⽂件到oss）后回调到webview
wvmain.setWebChromeClient(new WebChromeClient(){
//For Android  >= 5.0
@Override
public boolean onShowFileChooser(WebView webView, ValueCallback<Uri[]> filePathCallback, FileChooserParams fileChooserParams) {
uploadMessageAboveL = filePathCallback;
uploadPicture();
return true;
}
//For Android  >= 4.1
public void openFileChooser(ValueCallback<Uri> valueCallback, String acceptType, String capture) {
uploadMessage = valueCallback;
uploadPicture();
}
});
选择并处理完⽂件后，调⽤Callback（valueCallback 或 filePathCallback）的onReceiveValue⽅法，webview⾥的input标签才会调⽤onchange
⽐如以下是选择完⽂件后，上传⽂件到oss成功后的回调⾥，如果成功得到oss图⽚地址，则调⽤onReceiveValue⽅法把图⽚的本地uri 回传给webview，失败或异常情况回传null给webview
public void successImg(String img_url) {
if (img_url != null){
curPicUrl = img_url;
mHandle.sendEmptyMessage(UPLOAD_SUCESS);
if (uploadMessage != null) {inputtypefile不上传文件
uploadMessage = null;
}
if (uploadMessageAboveL != null) {
uploadMessageAboveL = null;
}
}else{
curPicUrl = "";
mHandle.sendEmptyMessage(UPLOAD_FAIL);
if (uploadMessage != null) {
uploadMessage = null;
}
if (uploadMessageAboveL != null) {
uploadMessageAboveL = null;
}
}
}
如果回传null给webview，如果input⾥⾯之前还没有⽂件， input的onchange，oninput⽅法不会调⽤，如果之前已经选择过⽂件，files 对象之前⾥⾯有内容，现在内容会变成空，发⽣了改变,onchange，oninput⽅法都会调⽤(先调⽤oninput)，但是files对象的长度为0，可以根据files的长度来做不同的处理，⽐如：
doChange() {
var file = ElementById("fileInput");
if(file.files.length == 0){//清除之前的图⽚
return;
}else{
/
/显⽰图⽚预览
}
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。