Pure js multi-image upload preview,

Recently, I had doubts about life during the interview, so I calmed down and wrote a plugin for uploading pictures. The person who called the interview was asked, if there are mistakes or problems, please point out! !

1. HTML structure

	<input type="file" id="upimg"/ style="display: none;">
	<button id='upimgs'>Upload image</button>
	<div id="preview"></div>

2.js part

                         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)

Simulate the upload button, the native button is a bit ugly, so it is convenient for everyone to beautify, in case the ui is a button control, right? The main content here uses the MouseEvent API, which is the interface for user mouse interaction events. I won't explain it here;

			  var result, div, imgarry = [];
			  if(typeof FileReader==='undefined'){
			   result.innerHTML = "Sorry, your browser does not support FileReader";
			   input.setAttribute('disabled','disabled');
			  }else{
			   input.addEventListener('change',readFile,false);
			  }

Here it is judged whether the browser supports FlieReader

			  function readFile(){
			   for(var i=0;i<this.files.length;i++){
			    if (!input['value'].match(/.jpg|.gif|.png|.bmp/i)){ //Determine the upload file format
			     return alert("The format of the uploaded image is incorrect, please select again") }
			    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); //Insert dom tree<br> }
					   }
					  }
			   }

This code is a bit long, mainly because after FlieReader reads the file, it is converted into a base64 file stream through readAsDayaURL. This is a point I am struggling with. Before I got here, it was thrown to the back-end for processing. A few days ago, the interviewer asked how to switch to binary, and I was confused. Really can not save trouble, sad! ! ! Well, I used the imgarry array above to store the base64 and convert it into a binary blob (this is the thing I want to cry). The function dataURLtoBlob is as follows:

			  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});
				}

Well, this code did not carefully look at the principle, the landlord is very panic =-=! ! Just wait and see! What if you meet an interviewer and ask? The owner is just a rookie!

			   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);

Using ajax to upload files, the landlord just finished it, and the final code pseudo-code is very panic! ! ! !

Another is that preview can also be achieved using cavan canvas