How to get uploaded file name, type and size using jquery

This time I will show you how to use jquery to get the name, type and size of the uploaded file. What are the things to note?The following is a practical case, let’s take a look. take a look.

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 in 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:

How to use bootstrap in the vue-cli project

How to operate JS to obtain the user’s city and location Geographical location

The above is the detailed content of How to get uploaded file name, type and size using jquery. For more information, please follow other related articles on the PHP Chinese website!