javascript HTML5 file upload FileReader API_javascript tips

The file upload function is becoming more and more common now. All social networking sites and media sites, such as Youku Video, Weibo, etc., provide functions such as uploading pictures and videos. But in the past, WEB programmers knew that uploading files using HTML forms was very troublesome. Especially if you want to know some attributes of the files uploaded by the user, you have to wait until the upload is completed.

Uploading unknown things to the server may cause security problems, or it may be too large, exceeding the allowed size, and wasting space. Well now, WEB technology is improving, and HTML5 has brought many good things. This FileReader API allows you to obtain some basic properties of the uploaded file before the user uploads it.

HTML code

This FileReader API works the same as the File API and requires the use of input[type="file"] elements:

<-- 一个能上传多媒体文件的表单 -->
<input type="file" id="upload-file" multiple />

<-- 显示图片的地方 -->
<div id="destination"></div>

In the File API article, there is detailed information about the files that can be read, such as address, volume, size, file type, etc.

JavaScript

In this example, we use the input form field to upload a picture. When the user selects a picture on his or her computer, the picture will be displayed on the page:

document.getElementById('upload-file').addEventListener('change', function() {
 var file;
 var destination = document.getElementById('destination');
 destination.innerHTML = '';

 // 循环用户多选的文件
 for(var x = 0, xlen = this.files.length; x < xlen; x++) {
 file = this.files[x];
 if(file.type.indexOf('image') != -1) { // 非常简单的交验

  var reader = new FileReader();

  reader.onload = function(e) {
  var img = new Image();
  img.src = e.target.result; // 显示图片的地方

  destination.appendChild(img);
  };
  
  reader.readAsDataURL(file);
 }
 }
});

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

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

The above is the entire content of this article, I hope it will be helpful to everyone’s study.