Javascript HTML5 File Upload FileReader API, html5filereader

Javascript HTML5 File Upload FileReader API, html5filereader

The file upload function is becoming more and more common. All social websites, media websites, such as Youku videos and Weibo, provide functions such as uploading images and uploading videos. However, in the past, WEB programmers knew that it was very troublesome to upload files using HTML forms. In particular, you would like to know some attributes of the files uploaded by users, you must wait until the upload is complete.

When an unknown object is uploaded to the server, security issues may occur, or the size may be too large to exceed the permitted value, which wastes space. Now, the WEB technology is improving, and HTML5 brings a lot of good things. This FileReader API allows you to obtain some basic attributes of the uploaded file before the user uploads the file.

HTML code

This FileReader API works the same way as the File API. You need to use the input [type = "file"] element:

<-- A form that can upload multimedia files --> <input type = "file" id = "upload-file" multiple/> <-- display the image --> <div id = "destination"> </div>

The File API article contains detailed information about the files that can be read, such as the address, volume, size, and File type.

JavaScript

In this example, we use the input form field to upload an image. When you select an image on your computer, the image will be displayed on the page:

Document. getElementById ('upload-file '). addEventListener ('change', function () {var file; var destination = document. getElementById ('destination'); destination. innerHTML = ''; // loop the multiple objects selected by the user for (var x = 0, xlen = this. files. length; x <xlen; x ++) {file = this. files [x]; if (file. type. indexOf ('image ')! =-1) {// it is very simple to submit var reader = new FileReader (); reader. onload = function (e) {var img = new Image (); img. src = e.tar get. result; // destination where the image is displayed. appendChild (img) ;}; reader. readAsDataURL (file );}}});

In this example, we use the readAsDataURL method in FileReader to convert the image content to a base64 encoded string and then display it using the data URI of the image. Other FileReader reading methods include readAsText, readAsArrayBuffer, and readAsBinaryString.

With this FileReader API, we can avoid users uploading files to the server first, and then operate on the browser client. The Preprocessing before uploading to the server is necessary.

The above is all the content of this article, hoping to help you learn.

Articles you may be interested in:

• Jsp page implementation file upload and download class code
• File, FileReader, and Ajax File Upload instance analysis (php)
• Js Implementation of input type = "file" file Upload sample code
• Example of asynchronous file upload using AjaxFileUpload. js
• The ajaxFileUpload. js plug-in supports Multifile upload.
• Use javascript with fileReader to upload images
• The following describes how to upload a file without refreshing the content of iframe, FormData, and FileReader.
• Javascript HTML5 Ajax implements the File Upload progress bar Function
• Multifile Upload Based on javascript html5
• Javascript html5 mobile terminals can easily upload files