jquery gets uploaded file details

This time I will bring you jquery to get the detailed information of the uploaded file. What are the precautions for jquery to get the detailed information of the uploaded file? The following is a practical case, let's take a look.

Before

the file is uploaded to the server, we can get the name, type and size of the uploaded file through jquery.

Normally, when users upload files through the tag, we can see the name of the uploaded file. The HTML5 File API provides us with a secure way to access files on the computer on the client side and better perform operations on these files.

Browsers that support File API include IE10, Firefox4, Safari5.0.5, Opera11.1 and Chrome.

File API adds some interfaces for direct access to file information based on the file input field of the form. HTML5 adds a files collection to the DOM for file input elements. When one or more files are selected through the file input field, the files collection contains a set of File objects, each File object corresponding to a file. Each file has the following read-only attributes:

• name: The file name in the local

  file system .

• size: The number of bytes in the file.

• type: MIME type of the file.

• lastModifiedDate: The time when the file was last modified.

Through this files interface, we can get the name, type and size of the uploaded file in jquery. Experience the effect through the demo below.

1. Use the "Select File" button to select the file to upload. You can select multiple files.

2. After selecting the file, click the "Show detailed information of uploaded file" button to view the detailed information of the file.

To upload multiple files at the same time, you need to add the multiple attribute to the file upload tag. The HTML structure of the above demo is as follows:

<input id="fUpload" multiple type="file" /><br />
<ul id="ulList">
</ul>
<input id="btnShow" type="button" value="显示上传文件的详细详细" />

In the jquery code, the number of selected files is first detected, and then the detailed information of each file is obtained through a loop. The complete jquery code is as follows:

$("#btnShow").on('click', function () {
  $("#ulList").empty();
  var fp = $("#fUpload");
  var lg = fp[0].files.length; // get length
  var items = fp[0].files;
  var fragment = "";
   
  if (lg > 0) {
    for (var i = 0; i < lg; i++) {
      var fileName = items[i].name; // get file name
      var fileSize = items[i].size; // get file size 
      var fileType = items[i].type; // get file type
 
      // append li to UL tag to display File info
      fragment += "<li>" + fileName + " (<b>" + fileSize + "</b> bytes) - Type :" + fileType + "</li>";
    }
 
    $("#ulList").append(fragment);
  }
});

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

node implements the image verification code function during login

The vue parent component passes the value to the parent component Detailed explanation of steps

The above is the detailed content of jquery gets uploaded file details. For more information, please follow other related articles on the PHP Chinese website!