Home > Developer > JavaScript
Simple Example of js Upload File preview, js Upload File Preview
1. FILE API
Html5 provides two methods: FIle and FileReader to read FIle information and files.
2. example
<Html> <body> <div id = "test-image-preview" style = "border: 1px solid rgb (204,204,204); width: 100%; height: 200px; background-size: contain; background-repeat: no-repeat; background-position: center; "> </div> <br/> <div id =" test-file-info "> </div> <br/> <input type =" file "id =" test-image-file "> <script type =" text/javascript "> var fileInput = document. getElementById ('test-image-file'), info = document. GetElementById ('test-file-info'), preview = document. getElementById ('test-image-preview'); // listens for the change event: fileInput. addEventListener ('change', function () {// clear the background image: preview. style. backgroundImage = ''; // check whether the file is selected: if (! FileInput. value) {info. innerHTML = 'no selected file'; return;} // get File reference: var file = fileInput. files [0]; // obtain the File information: info. innerHTML = 'file: '+ file. name + '<br>' + 'size:' + file. size + '<br>' + 'modify:' + file. lastModifiedDate; if (file. type! = 'Image/jpeg '& file. type! = 'Image/png '& file. type! = 'Image/gif') {alert ('is not a valid image file! '); Return;} // read the file: var reader = new FileReader (); reader. onload = function (e) {var data = e.tar get. result; // 'data: image/jpeg; base64,/9j/4AAQSk... (base64 encoding )... 'preview. style. backgroundImage = 'url ('+ data +') ';}; // read the file in DataURL format: reader. readAsDataURL (file) ;}); </script> </body>
The file read in the form of DataURL is a string, similar to data: image/jpeg; base64,/9j/4AAQSk... (base64 encoding )...,
It is often used to set images. If you need to handle the problem on the server, send the base64 string followed by the characters to the server and use Base64 to decode the binary content of the original file.
3. Explanation
The code above also demonstrates an important feature of JavaScript, namely the single-thread execution mode. In JavaScript, the browser's JavaScript execution engine always executes JavaScript code in single-threaded mode. That is to say, JavaScript code cannot be executed by more than one thread at a time.
You may ask how to handle multiple tasks for JavaScript executed in single-thread mode?
In JavaScript, multi-task execution is actually asynchronous, such as the above Code:
Reader. readAsDataURL (file );
An Asynchronous Operation is initiated to read the file content. Because it is an asynchronous operation, we do not know when the operation ends in JavaScript code. Therefore, we need to set a callback function first:
Reader. onload = function (e) {// This function is automatically called after the file is read :};
After the file is read, the JavaScript engine automatically calls the callback function we set. When the callback function is executed, the file has been read, so we can safely obtain the file content within the callback function.
The simple example of this js File Upload preview is all the content shared by the editor. I hope you can give us a reference and support the help house.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
