Shulou(Shulou.com)06/02 Report--

This article introduces the relevant knowledge of "what are the skills for uploading HTML files?". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

1. Single file upload

We can specify the input type as file to use the file upload feature in Web applications.

Input filte provides buttons to upload one or more files. By default, it uploads single files using the operating system's native file browser. After a successful upload, File API makes it possible to read File objects using simple JS code. To read the File object, we need to listen for change events.

First, obtain an example of file upload through id:

Const fileUploader = document.getElementById ('file-uploader')

Then add a change event listener to read the file object after the upload is complete, and we get the uploaded file information from the event.target.files attribute:

FileUploader.addEventListener ('change', (event) = > {const files = event.target.files; console.log (' files', files);})

Looking at the output in the console, take a look at the FileList array and the File object, which has all the metadata information about the uploaded file.

two。 Multiple file upload

If we want to upload multiple files, we need to add the multiple attribute to the tag:

Now, we can upload multiple files, based on the previous example, select multiple files to upload, and observe the changes in the console:

3. Understanding file metadata

Whenever we upload a file, the File object has metadata information, such as file name,size,last update time,type, and so on. This information is useful for further verification and special processing.

Const fileUploader = document.getElementById ('file-uploader'); / / listen to the change and read the metadata fileUploader.addEventListener (' change', (event) = > {/ / get the file list array const files = event.target.files; / / traverse and get the metadata for (const file of files) {const name = file.name; const type = file.type? File.type: 'NA'; const size = file.size; const lastModified = file.lastModified; console.log ({file, name, type, size, lastModified});}})

The following is the output of a single file upload:

4. Understanding the accept property

We can use the accept attribute to restrict the type of file to upload, and if only the file format you want to upload is .jpg, .png, you can do this:

In the above code, only files with suffixes .jpg and .png can be selected.

5. Manage the contents of the file

After successfully uploading the file to display the contents of the file, from the user's point of view, if there is no preview after uploading, it will be very strange and inconsiderate.

We can use the FileReader object to convert the file to a binary string. Then add a load event listener to get the binary string when the file is successfully uploaded.

/ / FileReader instance const reader = new FileReader (); fileUploader.addEventListener ('change', (event) = > {const files = event.target.files; const file = files [0]; reader.readAsDataURL (file); reader.addEventListener (' load', (event) = > {const img = document.createElement ('img'); imageGrid.appendChild (img); img.src = event.target.result; img.alt = file.name;});})

6. Verify file size

If the image uploaded by the user is too large, in order not to put pressure on the server, we need to limit the size of the image. The following is to allow users to upload images that are less than 1m. If it is larger than 1m, the upload will fail.

FileUploader.addEventListener ('change', (event) = > {/ / Read the file size const file = event.target.files [0]; const size = file.size; let msg =''; / / check whether the file size is larger than 1MB if (size > 1024 * 1024) {msg = `The allowed file size is 1MB. The file you are trying to upload is of ${returnFileSize (size)} `;} else {msg = `A ${returnFileSize (size)} file has been uploaded successfully. `;} feedback [XSS _ clean] = msg;})

7. Show file upload progress

A better user experience is to let the user know the progress of the file upload. We used FileReader and the events of reading and loading files earlier.

Const reader = new FileReader ()

FileReader also has a progress event that indicates the current upload progress. With the progress tag of HTML5, let's simulate the upload progress of the file.

Reader.addEventListener ('progress', (event) = > {if (event.loaded & & event.total) {/ / calculate the percentage complete const percent = (event.loaded / event.total) * 100; / / bind the value to the `Secrets` tag progress.value = percent;}})

8. How to upload directory upload?

Can we upload the whole directory? Well, it's possible, but there are some limitations. There is a non-standard attribute called webkitdirectory (currently only Google browser and Microsoft Edge support uploading by folder), which allows us to upload the entire directory.

Currently, only Google browser and Microsoft Edge support uploading by folder. For more information, you can take a look at the upload button of Baidu Cloud disk's web version, which supports uploading by file under Firefox, while under Google and Edge, it will provide users with a drop-down to choose whether to upload based on file or folder.

Users must need confirmation to upload the directory

After the user clicks the upload button, the upload will be carried out. An important point to pay attention to here. The FileList array will contain information about all files in the upload directory in a flat structure. For each File object, the webkitRelativePath attribute represents the directory path.

For example, upload a home directory and other folders and files under it:

The File object will now populate the webkitRelativePath with:

9. Drag and drop upload

Drag and drop that doesn't support file uploads is a bit low, isn't it? Let's take a look at how to do this in a few simple steps.

First, create a drag and drop area and an optional area to display the contents of the uploaded file.

Drag & Drop an Image DROP HERE Your image to appear here..

Get the dropzone and content regions through their respective ID.

Const dropZone = document.getElementById ('drop-zone'); const content = document.getElementById (' content')

Add a dragover event handler to display the effect of the content to be copied:

DropZone.addEventListener ('dragover', event = > {event.stopPropagation (); event.preventDefault (); event.dataTransfer.dropEffect =' copy';})

Next, we need a drop event listener to handle.

DropZone.addEventListener ('drop', event = > {/ / Get the files const files = event.dataTransfer.files;})

10. Working with files using objectURL

There is a special method called URL.createobjecturl () that creates a unique URL from a file. You can also use the URL.revokeObjectURL () method to release it.

The URL.revokeObjectURL () static method is used to release a previously existing URL object created by calling URL.createObjectURL (). When you finish using a URL object, you should call this method to let the browser know that there is no need to keep a reference to the file in memory. FileUploader.addEventListener ('change', (event) = > {const files = event.target.files; const file = files [0]; const img = document.createElement (' img'); imageGrid.appendChild (img); img.src = URL.createObjectURL (file); img.alt = file.name;}); "what are the skills for uploading HTML files?" that's it. Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.