HTML5's File API implements local file processing through the following steps: 1. Obtain the file: Use the <input type="file"> and FileList objects to obtain the file selected by the user; 2. Preview the picture: Use the readAsDataURL method of FileReader to achieve preview before upload; 3. Multi-file control: Use multiple and accept attributes to limit the file type and number, and traverse and verify in JS; 4. Upload the file: Use FormData to wrap data and send it to the server through fetch or XMLHttpRequest. The backend needs to support the multipart/form-data format. The entire process includes four key links: acquisition, preview, restriction and upload.

In web development, HTML5's File API provides us with the ability to process local files, including reading, previewing, and uploading files. It allows the front-end to handle the files selected by the user more flexibly without having to rely on the back-end every time.

Get the file selected by the user

When the user selects files through <input type="file"> , we can get these files through JavaScript. The most common way is to use a FileList object, which is an array of classes that contain all selected File objects.

 <input type="file" id="fileInput">

Then use JS to get:

 const fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', function () {
    const files = this.files; // Get a FileList object console.log(files);
});

Each File object contains information such as file name, size, type, etc. For example, files[0].name is the file name, files[0].size is the number of bytes.

Note: If input does not set multiple attribute, then only one file can be selected at a time.

Preview the selected image file

Many times we need to preview the picture before uploading, such as avatar upload or image editor. At this time, you can use FileReader to read the file content.

The sample code is as follows:

• Create a FileReader instance
• Read file using readAsDataURL method
• Get the result in onload callback and assign it to the img element

 const reader = new FileReader();
reader.onload = function (e) {
    const preview = document.getElementById('preview');
    preview.src = e.target.result;
};
reader.readAsDataURL(file);

This allows you to realize local preview of the picture, and you can see the effect without uploading the server.

Multi-file upload and restriction control

Sometimes we want users to upload multiple files at once, but at the same time we don’t want them to pass a bunch of large files casually. At this time, you can combine multiple and accept attributes to enhance control.

 <input type="file" multiple accept="image/*">

This code allows the user to select multiple image files. It is also very simple to traverse these files in JS:

 for (let i = 0; i < files.length; i ) {
    const file = files[i];
    if (!file.type.startsWith(&#39;image/&#39;)) continue;
    // Only process image files}

You can also add size limits, such as only files smaller than 2MB are allowed:

 if (file.size > 2 * 1024 * 1024) {
    alert('File cannot exceed 2MB');
    continue;
}

Upload files to the server

Finally, we have to send the file to the server. You can use FormData to wrap the data, and then send the request in conjunction with fetch or XMLHttpRequest .

The basic process is as follows:

• Create a FormData instance
• Use append() to add file fields
• Send a POST request

 const formData = new FormData();
formData.append('file', file);

fetch('/upload', {
    method: 'POST',
    body: formData
});

The server can receive files like normal forms. Be careful to ensure that the backend supports the multipart/form-data format.

If it is uploading multiple files, you can append multiple times in the loop, or directly use new DataTransfer() to construct a list containing multiple files and then extract it.

Basically these are the operations. The whole process is not complicated, but each step has some small details that are easy to ignore, such as cross-domain issues, file type verification, memory release, etc. When used in actual use, you can flexibly combine it according to project requirements.

The above is the detailed content of Handling File Selections and Uploads with the HTML5 File API. For more information, please follow other related articles on the PHP Chinese website!