前端开发中经常会碰到图片上传的问题,网上的解决办法很多,可是有些图片上传的插件会有一些附属的插件,因此因为一个图片上传的问题可能额需要引入其他插件到项目中,久而久之项目会不伦不类,有时候插件之间也会有一些冲突,所以我们可以自己写一个图片上传的方法。
今天的演示是帮朋友做的一个移动端微信公众号项目,项目架构采用角+离子,因为对dom的操作jQuery会方便很多,但是jQuery比较厚重,所以最后选择用轻量级的zepto来对项目dom进行操作。
项目中有一个需求是上传个人作品,实现功能需要H5新对象FormData对象,XMLHttpRequest对象,FileReader对象。只需要这三个对象即可,话不多说上代码。
dom结构:
js结构:
function1:
美元的范围。imgList=[];
美元的范围。setUploader=function () {
var文件=. getelementbyid(照片);
files.click ();
美元(文件).unbind ()。(“改变”,函数(e) {
var文件=e.target.value;
如果(!/?jpg | jpeg | png | GIF | jpg | png)美元/test(文件)){
common.toast(“图片类型必须是jpeg, jpg, png中的一种“);
返回错误;
};
fsubmit ();
readAsBinaryString ();
});
};
之前
function2:
函数fsubmit () {
var itemImg={};
var形式=. getelementbyid (“form1”);
console.log(“形式”,形式)
var formData=https://www.yisu.com/zixun/new formData(形式);
formData.append (wxdesigner_sid, .fn.cookie美元(' wxdesigner_sid '));
formData.append (“id”, scope.masterInfo.id美元);
formData.append('电脑',' 1 ');
var oReq=new XMLHttpRequest ();
oReq.onreadystatechange=function () {
如果(oReq.readyState==4) {
如果(oReq.status==200) {
var json=JSON.parse (oReq.responseText);
console.log (json)
如果(json.Success) {
itemImg=json.Data;
美元scope.imgList=itemImg;
console.log (scope.imgList美元)
适用范围。美元();
itemImg={};
}
}
}
};
console.log (oReq)
console.log (formData)
oReq。打开(“后”,common.api +“Wxdesigner/设计/uploadworks”);
oReq.send (formData);
返回错误;
};//判断浏览器是否支持FileReader接口
如果(typeof FileReader==岸ㄒ濉?{//使选择控件不可操作
file.setAttribute(“残疾”、“禁用”);
}
之前
function3:
函数readAsBinaryString () {
var文件=. getelementbyid(照片).files [0];
console.log(文件)
var=new FileReader读者();//将文件以二进制形式读入页面
reader.readAsDataURL(文件);
reader.onload=function (f) {
scope.masterInfo.thumblist.push美元(f.currentTarget.result)
console.log (scope.masterInfo美元)
范围。应用()美元
}
}
之前
整个图片上传的dom层很简单,一个形式表单加上一个触发表单的函数(function1)。在function1中获取到& lt;输入type="文件"祝辞的点击事件,在选择图片的时候会做个判断,如果超出支持的图片类型围的时候做个提醒。
然后在后面调用function2和function3。
在function2中获取形式表单对象,然后创建一个FormData对象,将获取到的形式表单传入FormData,然后追加一些上传图片的参数。再创建一个新的XMLHttpRequest对象,然后开放发送XHR请求接口,发送(FormData)传递参数给接口。
到这个时候接口发送成功。
,这里的四个参数是formData中的四个参数
接口相应成功。
到这里有问题,图片上传成功写入数据库了,可是这时候需要在本地展示给用户看但是网页又不能直接访问设备本地的图片,因此我们需要FIleReader对象来对上传的图片文件读取为DataURL来展示在本地。
首先新建一个FileReader对象,然后将获取到的输入文件对象传入FileReader的readAsDataURL()方法,此方法是将文件读取为DataURL的。
