应用的平台环境：安卓webview；

涉及的技术点：

(1) ：在开发中，安卓webview默认点击无法调用文件选择与相机拍照(其他的设备ios等浏览器没有此问题)，需要让安卓开发同学在代码调整即可；

(2) 点击选择图片后如何展示在页面上呢？很多开发人员估计是直接获取 this.value，这是错误的，不可行。有2个API可以现实，new FileReader与window.URL.createObjectURL(最优)；

new FileReader的实现如下：

upload

在安卓webview实战中，读取与写入速度相当慢，不推荐；

//-----------------------------------------------------------------------------------------

window.URL.createObjectURL实现如下：

upload

var o_file = document.getElementById('j-file'),

o_btn = document.getElementById('j-btn'),

o_img = document.getElementById('j-img');

o_file.addEventListener('change',function(event){ var file = event.target.files[0]; if(!file) return; var url = window.URL.createObjectURL(file); if(/image/.test(file.type)){

o_img.setAttribute('src',url);

}else{

console.log('请选择图片');

}

},false);

o_btn.onclick = function(){ var data = new FormData();

data.append('file_a',o_file.files[0]);

data.append('text','test');

console.log(data);

}

这技术的好处是可以不必把文件内容读取到javascript中，而是直接使用文件内容，速度很快；

(3)如何讲图片数据通过XHR对象传递给服务端呢？new FormData()，为序列化表单以及创建与表单格式相同的数据(XHR传输)提供了实现，FormData不必明确在xhr对象上设置请求头部(如果是表单里面图片上传，enctype需要设置multipart/form-data)，XHR能自动识别，实例方法.append(key,value)自定义数据；

完整的代码例子如下：

upload

var o_file = document.getElementById('j-file'),

o_btn = document.getElementById('j-btn'),

o_img = document.getElementById('j-img'),

target_file = null;

o_file.addEventListener('change',function(event){ var file = event.target.files[0]; if(!file) return;

target_file = file; var url = window.URL.createObjectURL(target_file); if(/image/.test(target_file.type)){

o_img.setAttribute('src',url);

}else{

console.log('请选择图片');

}

},false);

o_btn.onclick = function(){ if(!target_file) return; //数据处理 var data = new FormData();

data.append('key',target_file);

var xhr = new XMLHttpRequest(); if(xhr.upload){

xhr.upload.addEventListener("progress", function(e){ var loaded = e.loaded; //已经上传大小情况 var tot = e.total; //附件总大小 var per = Math.floor(100*loaded/tot); //已经上传的百分比 console.log(per+'%');//进度 }, false);

}

xhr.onreadystatechange = function(e) { if (xhr.readyState == 4) {if (xhr.status >=200&&xhr.status<300||xhr.status==304) {//上传成功 }

}

};

xhr.onloadend = function(){//无论失败或成功 }

xhr.onerror = function(){

//网络失败 } // 开始上传 xhr.open("POST",'上传地址', true);

xhr.send(data);

}