Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                

android webview 文件选择,android系统webview使用input实现选择文件并预览

一般系统的实现方式:

代码实现

图片预览

$('.select').change(function(e) {

var _URL = window.URL || window.webkitURL;

$("#previewimg").attr("src", _URL.createObjectURL(this.files[0]))

})

input type="file"就是文件选择标签,默认样式为:

87edd1b99571fd67f2fe08d4669b35d4.png 如果不喜欢默认样式,可以把它设置为透明,然后自己用图片或元素覆盖它,这时候他仍然能响应点击

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 filePathCallback, FileChooserParams fileChooserParams) {

uploadMessageAboveL = filePathCallback;

uploadPicture();

return true;

}

//For Android >= 4.1

public void openFileChooser(ValueCallback 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) {

uploadMessage.onReceiveValue(imageUri);

uploadMessage = null;

}

if (uploadMessageAboveL != null) {

uploadMessageAboveL.onReceiveValue(new Uri[]{imageUri});

uploadMessageAboveL = null;

}

}else{

curPicUrl = "";

mHandle.sendEmptyMessage(UPLOAD_FAIL);

if (uploadMessage != null) {

uploadMessage.onReceiveValue(null);

uploadMessage = null;

}

if (uploadMessageAboveL != null) {

uploadMessageAboveL.onReceiveValue(null);

uploadMessageAboveL = null;

}

}

}

如果回传null给webview,如果input里面之前还没有文件, input的onchange,oninput方法不会调用,如果之前已经选择过文件,files对象之前里面有内容,现在内容会变成空,发生了改变,onchange,oninput方法都会调用(先调用oninput),但是files对象的长度为0,可以根据files的长度来做不同的处理,比如:

doChange() {

var file = document.getElementById("fileInput");

if(file.files.length == 0){//清除之前的图片

document.getElementById("showpic" + i).style.display = "none";

return;

}else{

//显示图片预览

}

}

添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值