最近面试到怀疑人生,静下心来写个上传图片的插件。叫面试的被问懵,如果有错误或者有问题欢迎指出!!
1.HTML结构
<input type="file" id="upimg"/ style="display: none;">
<button id='upimgs'>上传图片</button>
<div id="preview"></div>
2.js部分
var bottonUp=document.querySelector('#upimgs'),
input=document.querySelector('#upimg');
bottonUp.addEventListener('click',function(e){
var evt=new MouseEvent('click',{
bubbles: true,
cancelable: true,
view: window,
})
input.dispatchEvent(evt)
},false)
模拟上传按钮,原生的按钮有点丑,这样方便大家美化,万一ui是个按钮控对不对,这里主要的内容使用的MouseEvent这个API,就是用户鼠标交互事件的接口这里就不多做解释了;
var result,div,imgarry=[];
if(typeof FileReader==='undefined'){
result.innerHTML = "抱歉,你的浏览器不支持 FileReader";
input.setAttribute('disabled','disabled');
}else{
input.addEventListener('change',readFile,false);
}
这里判断浏览器是否支持FlieReader
function readFile(){
for(var i=0;i<this.files.length;i++){
if (!input['value'].match(/.jpg|.gif|.png|.bmp/i)){ //判断上传文件格式
return alert("上传的图片格式不正确,请重新选择") }
var reader = new FileReader();
reader.readAsDataURL(this.files[i]);
reader.onload = function(e){
result = '<div id="result"><img src="'+this.result+'" alt=""/></div>';
imgarry.push(dataURLtoBlob(this.result))
div = document.createElement('div');
div.innerHTML = result;
document.getElementById('preview').appendChild(div); //插入dom树 <br> }
}
}
}
这段代码有点长,主要是FlieReader读取文件后,经过readAsDayaURL转化成base64的文件流,这是我纠结的一点,到了这里以前是丢给后端处理。前几天面试官要求如何转二进制,懵比状态。果真不能省事,悲哀!!!好了 上面我用了imgarry数组来存base64转化成二进制的blob(就是这个东西蓝瘦想哭)。dataURLtoBlob这个函数如下:
function dataURLtoBlob(dataurl) {
var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
while(n--){
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], {type:mime});
}
好吧这段代码没有仔细的去看原理,楼主很慌=-=!!等下看看吧!万一遇见面试官要问呢!楼主只是菜鸟!
var fd = new FormData();
for (i = 0; i < imgarry.length; i++) {
fd.append('file[]', imgarry[i]);
}
var xhr = new XMLHttpRequest();
xhr.open('POST', '/server', true);
xhr.send(fd);
使用ajax上传文件,楼主就这样完成了,最后代码伪代码 很慌很慌!!!!
还有另一种就是预览也可以使用cavan画布来实现