1. Some methods to realize picture preview.
After understanding it, the methods are actually similar. There are probably the following ways:
① Subscribe to the onchange event of the input[type=file] element.
Once the selected path is changed, the image is uploaded to the server, and the address of the image is returned to the server side and assigned to the img element.
Disadvantages: The workload is large. Some uploads are not the pictures that users need to upload in the end. However, this method will save all the pictures selected during the upload process to the server, which will cause waste of resources. Moreover, cleaning temporary preview images on the server side also requires a certain amount of work.
②Use the new HTML5 feature FileReader.
This object provides many related methods, the most important method is readAsDataURL. Click me to learn more.
Disadvantages: The Data URI Scheme obtained through the readAsDataURL method of FileReader will generate a very long base64 string. If the image is larger, the string will be longer. If the page reflow occurs, it will cause performance degradation. Moreover, the browser support is inconsistent, and the supported browsers are: FF3.6+, Chrome7+, IE10+.
③ Use window.URL.createObjectURL instead of FileReader, and then use the DXImageTransform.Microsoft.AlphaImageLoader filter to be compatible with IE.
Disadvantages: Due to the security considerations in IE11, the real address of the user's selected file cannot be obtained through value, outerHTML and getAttribute on the input[type=file] element, and can only be obtained.
D:/frontEnd/File name. Therefore, you need to use the document.selection.createRangeCollection method to obtain the real address.
2. My plug-in production
I chose a more conservative method, which is the third method to use window.URL.createObjectURL instead of FileReader, and then use the DXImageTransform.Microsoft.AlphaImageLoader filter to be compatible with IE.
①The first step is HTML layout
<div id="pic"><img id="preview" src="../imgs/default.jpeg"></div><input type="file" id="uploadBtn" accept="image/*" onchange="setPreviewPic()">
Do you want to say so easy?
②Second step, plug-in js encapsulation.
1. Create an object
I mainly adopt the combined inheritance method and encapsulate two methods, namely single image upload and multiple image upload. Because whether it is uploading a single image or uploading a single image, you need to pass in and upload the input button, img tag, div wrapped in img, and the maximum single image value, in KB. Therefore, these four parameters must be passed in when creating the upload image object. The method to create this object is as follows:
var SetPreviewPic=function(fileObj,preview,picWrap,maxImgSize){this.fileObj=fileObj;this.preview=preview;this.picWrap=picWrap;this.maxImgSize=maxImgSize;}2. Define the matching pattern
Because it is uploading images, in addition to adding accept="image/*" to input and making preliminary restrictions, a js regularity is also needed to determine whether it is an image through path detection. So define this pattern on prototype for use in two methods:
SetPreviewPic.prototype.pattern=new RegExp('/.(jpg|png|jpeg)+$','i');3. Define the method
The main thing is to determine whether the environment is lower than IE11 and write two types of solutions. The first is to directly preview the picture by changing the src of img, and the second is to achieve the preview effect through filters under the lower version of IE.
FF, Chrome, IE11 or above: (The code for previewing multiple images is posted here)
<span> if(maxPics){</span> <br> if(this.fileObj.files && this.fileObj.files[0]){var imgs=this.picWrap.querySelectorAll('img'); //Find how many pictures are already in the DOM var num=imgs.length;var html=this.picWrap.innerHTML; if(Number(num)<Number(maxPics)){ //Judge whether the maximum upload limit is exceeded if(num==1&&(!imgs[0].classList.contains('newLoad'))){ //Coverage the first default image html='';}if(this.pattern.test(fileObj.files[0].name)){if(judgeSize(fileObj.files[0].size/1024, this.maxImgSize)){//Judge whether the size of the image exceeds the limit html='<img style="margin:5px;width:'+width+'px;height:'+height+'px;" src='+window.URL.createObjectURL(this.fileObj.files[0])+' />'+html; this.picWrap.innerHTML=html;}else{alert('The picture you uploaded is too big!');}}else{alert('What you uploaded doesn't seem to be an image, please check it!');}}else{alert('upload at most'+maxPics+'pics!');}}Under IE11, use filters to achieve the effect:
var nums=this.picWrap.childNodes.length;//Because querySelectorAll and other methods are not supported below IE6, we can judge if(nums<maxPics+2) by the length of childNodes if(nums<maxPics+2){//The addition of 2 here is because there is a default image, and the length of childNodes read will be 1 more this.fileObj.select(); if(document.selection){var imgSrc=document.selection.createRange().text;var image=new Image(); image.src=imgSrc; filesize=image.fileSize; if(judgeSize(image.fileSize/1024, this.maxImgSize)){//The size of the div must be set in IE var ele=document.createElement('div');ele.style.width=width+'px';ele.style.height=height+'px';ele.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src='"+imgSrc+"')";try{this.picWrap.appendChild(ele);}catch(e){alert('The image you uploaded is incorrect, please select again!'); return false;}this.preview.style.display='none';document.selection.empty();}else{alert('The image you uploaded is too large!');}}At this point, it's done!
usage:
<script type="text/javascript" src="../js/singlePic.js"></script><script>var fileObj=document.getElementById('uploadBtn');var preview=document.getElementById('preview');var picWrap=document.getElementById('pic');fileObj.onchange=function(){var obj=new SetPreviewPic(fileObj,preview,picWrap,100);//Define the upload image object, the parameters are the input button for uploading the image, the img tag package, the div wrapped in img, and the maximum single photo value, the unit is KBobj.uploadSinglePic(200,250);//UploadSinglePics(200,250,2); //UploadPics(200,250,2); //UploadPics(200,250,2); //UploadPics(200,250,2); //UploadPics(200,250,2); //UploadPics(200,250,2); //Uploads multiple pictures, the parameters are the width, height, and maximum number of uploads}</script>The above is the relevant knowledge about the JS upload image preview plug-in production (compatible to IE6) introduced to you by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message. The editor will reply to you in time!