纯js多图上传预览，

最近面试到怀疑人生，静下心来写个上传图片的插件。叫面试的被问懵，如果有错误或者有问题欢迎指出！！

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画布来实现

纯js多图上传预览，

猜你喜欢