Hello everyone, I’m Daotin, captain of the front end, want to get more exciting content of the front end, follow me, unlock the new position of the front end growth.

Recent popular articles:

  • Picture waterfall flow, so easy
  • 4 Common Cross-domain Ajax Solutions (Easy to understand)
  • Vue.js Naming Style Guide (easy to remember version)

It takes about 5 minutes to read the full text. It is recommended to bookmark it before reading it.

The following text:

The front-end cannot directly operate local files, so the user needs to trigger the operation. There are three common triggering methods:

  • Select a file from

  • Drag the file by dragging

  • Copy and paste it in the edit box

Set the file upload style

Then, you can bind a click event to the custom button. In this click event, you can operate on the native upload button as follows:

let file = document.querySelector('#fileInput');
file.click();
Copy the code

Alternatively, you can overlay the native button on top of the custom button, set the size of the native button and the custom button to be the same, position the native button on top of the custom button, and set the opacity of the native button to 0.

Click the button to get the file

The first is a common upload mode

$("#file-input").on("change".function() {
    console.log('File name:${e.target.value}`); // C:\fakepath\1111.jpg
    
    // Create a formData object and upload it to the server via Ajax
    let formData = new FormData();
    formData.append("iFile".this.files[0]);
    
    // Upload ajax to server code omitted...
});

MyFileName (C:\ fakePath \1111.jpg)
let file = formData.get('iFile');

// File type data contents:
/ / {
// lastModified: 1594620655781
// lastModifiedDate: Mon Jul 13 2020 14:10:55 GMT+0800
// name: "1111.jpg"
// size: 29848
// type: "image/jpeg"
// webkitRelativePath: ""
// }
Copy the code

This file, if it is an image, needs to be displayed in the front end. However, the file file is a binary file, which cannot be viewed directly, and needs further conversion. This can be done with a FileReader object.

By instantiating a FileReader, calling its readAsDataURL and passing it a File object, listening for its onLoad event, the result of the load is in its result property. It is in base64 format and can be assigned directly to an IMG SRC.

// Obtain the file later
let reader = new FileReader();
let fileType = file.type;

// Reader is finished
reader.onload = function (e) {
    if(/^image\/[jpeg|png|gif]/.test(fileType)) {
        let img = document.createElement("img");
        img.src = e.target.result;
        document.body.appendChild(img); // Insert the image into the body}}// Call reader
reader.readAsDataURL(file);
Copy the code

The second way is drag and drop

We need to listen for drag-and-drop events:

$(".img-container").on("dragover".function (event) {
    event.preventDefault();
}).on("drop".function(event) {
    event.preventDefault();
    // The data is in the Event dataTransfer object
    let file = event.originalEvent.dataTransfer.files[0];

    // Then you can use FileReader to operate
    fileReader.readAsDataURL(file);

    // Or add to a FormData
    let formData = new FormData();
    formData.append("fileContent", file);
})
Copy the code

The third way to paste

/ / paste of the data is in the event. The clipboardData. Inside the files:
$("#editor").on("paste".function(event) {
    let file = event.originalEvent.clipboardData.files[0];
});
Copy the code

Note: Above, we used three ways to get the contents of the file, and finally got:

  • FormData format

  • FileReader Reads in base64 binary format

If you don’t use jQuery, no problem, just use Ajax; If you are using jQuery, you need to set both properties to false because jQuery will automatically escape the content and automatically set the MIME type based on the data. :

$.ajax({
    url: "/upload".type: "POST".data: formData,
    processData: false.// Do not process data
    contentType: false   // Do not set the content type
});
Copy the code

Refer to the link

  • Front-end local file operation and upload
  • Github.com/Daotin/fe-b…

For more exciting content, follow me for more front-end technology and personal growth related content, I’m sure interesting people will meet!

It is said that people who click “like” will be lucky enough to get a promotion and a raise a month later