Introduction
Using the FileReader object, web applications can asynchronously read the content of files (or raw data buffers) stored on the user's computer, and can use File objects or Blob objects to specify the file or data to be processed. The File object can be from the FileList object returned by the user after selecting a file on an <input type="text" /> element, or from the DataTransfer object generated by the drag-and-drop operation, or from the return result after executing the mozGetAsFile() method on an HTMLCanvasElement.
Multiple pages, upload multiple pictures DEMO codes
<!Doctype html><html> <head> <title>Upload the image to display the preview image</title> <style> #result img{ height:100px; display:inline-block; margin-right:10px; margin-bottom:10px; } </style> </head> <body> <div> <p> <label>Please select an image file: </label> <input type="file" id="file_input" style="display:none;" /> </p> <div id="result"> <a href="javascript:void(0);">Add image</a> </div> </div> <div> <p> <label>Please select an image file: </label> <input type="file" id="file_input" style="display:none;" /> </p> <div id="result"> <a href="javascript:void(0);">Add image</a> </div> </div> <script src="jquery-2.2.1.min.js"></script> <script> $(".add_img_btn").unbind("click").on("click",function(){ $(this).parents(".add_imgs").find("input[type=file]").click(); var result = $(this).parents(".add_imgs").find("input[type=file]"); dads(result,input); }) function dads(result,input){ if(typeof FileReader==='undefined'){ result.innerHTML = "Sorry, your browser does not support FileReader"; input.setAttribute('disabled','disabled'); }else{ $(input).unbind("change").on("change",function(){ var file = this.files[0]; if(!/image///w+/.test(file.type)){ alert("File must be an image!"); return false; } var reader = new FileReader(); reader.readAsDataURL(file); reader.onload = function(e){ $(result).append('<img src="'+this.result+'" />'); } }) } } } } } </script> </body></html>The above is all about this article, and I hope it will be helpful for everyone to learn JavaScript programming.