FormData

Simple upload example

 tag */

var fileInput = document.querySelector('.file-input');
var formData = new FormData();

// Add formData to upload the file
fileInput.onchange = function(e){
  formData.append("fileIn".this.value);
}

// Upload the file
var request = new XMLHttpRequest();
request.open("POST"."/ajax.php");
request.send(formData);

Copy the code

Interpretation steps

  1. fileInput 的 domObject acquisition,FormDataObject generation;
  2. usefileInput 的 onchangeEvent to get the contents of the file;
  3. useformData 的 appendMethod to add a new value toformDataTo come in;
  4. useXMLHttpRequest 的 sendMethod to upload files;

Principle that

The FormData object can be used for more than just uploading files. As its name suggests, it can simulate a series of key-value pairs for form controls and then be used for XMLHttpRequest submission. Its greatest advantage is that it can upload a binary file asynchronously;

FormData can’t read the file. The core of FormData is to upload the file by append() and change the file into a new field.

FileReader

Simple file reading example


 tag */

var fileInput = document.querySelector('.file-input');
// Create the FileReader object
var fileReader = new FileReader();

fileInput.onchange = function(e){
  // Get the original File object
  var file = event.target.files[0];
  // Read file objects in binary
  fileReader.readAsArrayBuffer(file);
  //fileReader.readAsDataURL(file); // A string in the data:URL format to indicate the contents of the file to be read
  //fileReader.readAsText(file); // Represents the contents of the read file as a string
}

// After the read operation is complete
fileReader.onload = function (e) {
  console.log(e)
}

Copy the code

Interpretation steps

  1. createFileReaderObject;
  2. throughfileInput 的 domobjectonchangeMethod to get the originalFileObject;
  3. throughFileReaderOne of the read methods, read the originalFileObject;
  4. throughFileReader 的 onloadMethod to continue reading the finished operation;

Principle that

Generally speaking, reading files should be used when you need to make a breakpoint to resume, or want to preview uploaded images;

Preview image examples


var fileInput = document.querySelector('.file-input');
var imgSrc = document.querySelector('.img')
// Create the FileReader object
var fileReader = new FileReader();

fileInput.onchange = function(e){
  // Get the original File object
  var file = event.target.files[0];

  fileReader.readAsDataURL(file); // A string in the data:URL format to indicate the contents of the file to be read
}

// After the read operation is complete
fileReader.onload = function (e) {
  console.log(e)
  imgSrc.src = e.target.result
}

Copy the code

Since I don’t use FileReader very much, I won’t go into detail here, but if you are interested, you can go straight to the MDN documentation

conclusion

Although I tried uploading files long ago, I didn’t have a deep understanding of them at that time, and I couldn’t recognize them because of the recent blows of my knowledge in this field.

Thank you for your guidance, (guidance for several times, I still forget)

Thanks for the documentation provided by MDN for giving me some inspiration

  • The use of FormData objects
  • FileReader

Thanks for reading, and feel free to point out the shortcomings of the article and discuss more code optimizations

The story of the original site

Original text links to Ajax file uploads