Reorganize file upload

background

File upload should be both unfamiliar and familiar to the front-end. Every time you upload a file, whether it is uploading a picture or uploading other types of files, if the file is relatively small, you can convert the file into a file stream and transfer it to The server, in order to better improve the function of uploading files, did some research and sorted it out.

Understanding the File object

Currently, the front-end does not support operating local files, so the File object selected by the user can only be obtained when the user actively triggers it. The user can operate in three ways to trigger:

1. Select local files through input type="file"
2. Drag the file over by drag and drop
3. Copy and paste in the edit box

Get through input

Of course, the first method is currently the most commonly used front-end, through input , you can quickly get the File object selected by the user.

The HTML code is as follows:

<form>
  <input type="file" id="fileInput" name="fileContent">
</form>

Then get the content of the entire form through the FormData (will be explained a little at the end of the article) object:

document.getElementById("fileInput").onchange = function(){
  let formData = new FormData(this.form);
  formData.append("fileName", this.value);
  console.log(this.value);
  console.log(formData);
}

input.value and formData are printed in the code. input.value is printed out by 061558a1f86f52 is a virtual path, and the file selected by the user cannot be accessed through or through the path. However, formData prints is an empty object. What we see is an empty object, which does not mean that the entire object is empty. It is just that the browser has append Add some fields.

//  FormData
{
    __proto__: FormData
}

Having said so much, I haven't mentioned the File object. In fact, after the user selects the file, File object has been created and stored in files in input DOM

When using input type="file" , you can see a browser default button on the browser, which does not seem to be very friendly. The author deals with this problem as follows:

<button id="btn"></button>

document.getElementById("btn").onclick = function(){
    const oInput = document.createElement("input");
    oInput.setAttribute("type","file");
    oInput.click();
    oInput.onchange = function(){
        console.log(this.files[0])
    }
}

//  File输出结果
{
    lastModified: 1600000000000,
    lastModifiedDate: Thu Sep 30 2021 15:11:10 GMT+0800 (中国标准时间),
    name: "logo.jpg",
    size: "20000",
    type: "image/jpg",
    webkitRelativePath: "",
    __proto__: File
}

Of course, File is only stored in input DOM , whichever method is used to obtain it. File object we see File an instance of 061558a1f870e5, which contains information such as modification time, file name, and file size.

Since the File object we obtained, there is no way to directly display it on the page, but files like pictures need to be previewed, we need to use the FileReader (introduced at the end of the article) object to further process the File

By instantiating FileReader adjust its readAsDataURL and passing the File object to it, monitoring its onload event, the result of reading load result attribute. It is a base64 , which can be directly assigned to a img of src .

document.getElementById("btn").onclick = function(){
    const oInput = document.createElement("input");
    oInput.setAttribute("type","file");
    oInput.click();
    oInput.onchange = function(){
        let fileReader = new FileReader();
        let { type:fileType } = this.files[0];
        fileReader.onload = function(){
            if(/^image/.test(fileType)){
                const img = document.createElement("img");
                console.log(this.result);
                img.setAttribute("src",this.result);
                document.body.appendChild(img);
            }
        }
        fileReader.readAsDataURL(this.files[0]);
    }
}

Use FileReader addition to reading as base64, it can also be read as the following format:

// 按base64的方式读取，结果是base64，任何文件都可转成base64的形式
fileReader.readAsDataURL(this.files[0]);

// 以二进制字符串方式读取，结果是二进制内容的utf-8形式，已被废弃了
fileReader.readAsBinaryString(this.files[0]);

// 以原始二进制方式读取，读取结果可直接转成整数数组
fileReader.readAsArrayBuffer(this.files[0]);

ArrayBuffer that it can be read as 061558a1f87242, which is a result in a raw binary format. It is also transparent to front-end developers and cannot directly read the content inside, but the ArrayBuffer.length , and it can be converted into an integer array to know the original binary content of the file.

Drop read file

How can the content of the file be read through Drop If by input tradition, then by Drop get the file can only be said to be popular.

HTML:

<div class="drop-container">
    drop your image here
</div>

javascript:

const onImageDrop = document.getElementById("img-drop");
onImageDrop.addEventListener("dragover",function(event){
  event.preventDefault();
})
onImageDrop.addEventListener("drop", function(event){
  event.preventDefault();
  console.log(event);
  let file = event.dataTransfer.files[0];
  let fileReader = new FileReader();
  let { type:fileType } = file;
  fileReader.onload = function(){
    if(/^image/.test(fileType)){
      const img = document.createElement("img");
      img.setAttribute("src",this.result);
      document.body.appendChild(img);
    }
  }
  fileReader.readAsDataURL(file);
  let formData = new FormData();
  formData.append("fileContent", file);
});

Data drop event event.dataTransfer.files inside, get this File can be performed after the object frame and the same operation as the input, i.e. the use FileReader read, or new space formData , then it append to formData inside.

Paste read file

Another way is to get the content of the file in the form of pasting. This way of reading the file is usually operated in an edit box. Set div of contenteditable to true :

<div contenteditable="true">
  hello, paste your image here
</div>

The pasted data is in event.originalEvent.files :

document.getElementById("editor").addEventListener("paste",function(event){
  let file = event.clipboardData.files[0];
  console.log(file)
});

File Upload

File object can be obtained through three methods. Currently, there are two commonly used file upload methods for the front end.

1. Whole file upload
2. Slice upload

Whole file upload

In fact, it is relatively simple to upload the entire file, because it does not require much operation, and the corresponding file can be transferred to the corresponding address FormData

document.getElementById("btn").onclick = function(){
    const oInput = document.createElement("input");
    oInput.setAttribute("type","file");
    oInput.click();
    oInput.onchange = function(){
        const formdata = new FormData();
        formdata.append("file",file);
        const xhr = new XMLHttpRequest();
        xhr.open("post","上传文件地址");
        //获取上传的进度
        xhr.upload.onprogress = function (event) {
            if(event.lengthComputable){
                //  进度
                const percent = event.loaded/event.total *100;
            }
        }
        //将formdata上传
        xhr.send(formdata);
    }
}

Slice upload

When the file is too large, it is not reliable to upload it by ordinary methods. The long waiting time makes users lose patience and even leads to the loss of users. At this time, you need to use slice upload to cut the file into several small files and upload them to the server separately. Compared with ordinary file upload, slice upload is more difficult, because it involves file segmentation and cooperation with the back end. Only the front-end content will be described here, and how to implement the back-end will not be described in detail (node will be used later).

document.getElementById("btn").onclick = function(){
  const oInput = document.createElement("input");
  oInput.setAttribute("type","file");
  oInput.click();
  oInput.onchange = function(){
    const file = oInput.files[0];
    const perFileSize = 2097152;
    const blobParts = Math.ceil(file.size / perFileSize);
    let progress = 0;
    let blobSize = 0;
    for (let i = 0; i < blobParts; i++) {
      const formData = new FormData();
      const _blob = file.slice(i * perFileSize, (i + 1) * perFileSize);
      formData.append('_blob', _blob);
      formData.append('filename', file.name);
      formData.append('index', i + 1);
      formData.append('total', blobParts);
      const xhr = new XMLHttpRequest();
      xhr.open("post","上传文件地址");
      xhr.onload = function onload() {
        blobSize += _blob.size;
        //  进度
        progress = parseInt((blobSize / file.size) * 100);
      };
      //    将formdata上传
      xhr.send(formdata);
    };
  }
}

The above content is mainly to split the file file.slice Blod (introduced at the end of the article) object, and then transfer the Blod object to the backend, and then the backend processes the transmitted content. , I won’t go into details here for now.

Concluding remarks

I have learned a lot about this file upload study. Although they are all basic things, they are still very useful. It is very helpful for the packaging of components and the packaging of file upload tools.

The above are just some simple examples, the specific business logic still needs specific analysis. Many things are not generalized.

---

Note: About FormData

FormData type is actually XMLHttpRequest2 level. It is used to serialize tables and create data in the same format as the form (of course for XHR transmission). FormData form of data stored in key/value forms a piece of data, key is unique, and one key may correspond to multiple value . If you use form initialization, each form field corresponds to a piece of data. The HTML name attribute of key , and their value attribute corresponds to the value of value

1. Add data through append(key, value)
2. By get(key)/getAll(key) obtain a corresponding value ;
3. Modify data through set(key, value)
4. Judge whether the corresponding key value is through has(key)
5. Delete data through delete(key)

Note: About FileReader

FileReader web api for file processing at the front end, especially in the processing of pictures. FileReader object allows the Web application to asynchronously read the contents of the file (or raw data buffer) stored on the user's computer. Use the File or Blob object to specify the file or data to be read.

FileReader method of reading the file is as follows:

1. readAsText(file, encoding): Read the file as plain text, and the read text is stored in the result attribute. The second parameter represents the encoding format;
2. readAsDataUrl(file): Read the file and save the file in the result attribute in the form of a data URI;
3. readAsBinaryString(file): Read the file and save the file as a string in the result attribute;
4. readAsArrayBuffer(file): Read the file and save an ArrayBuffer containing the contents of the file in the result attribute;

FileReader event monitoring

1. progress: every 50ms or so, a progress event will be triggered;
2. error: trigger under the condition that the file information cannot be read;
3. load: It will be triggered after successful loading;

Note: About Blod

Blob object represents an immutable, original data-like file object. The data represented by Blob JavaScript native format blob object is essentially js , which can store a large amount of data in binary encoding format.

Blob attributes:

1. whether isClosed has been called on this object
2. The size of the data contained in the size object
3. The MIME type of the data contained in the type object

Blob Method:

1. close closes the Blob object so that the underlying resources can be released
2. slice returns a new Blob object, which contains the data in the specified range of the source Blob object