Use jquery to get the specific content of the uploaded file

This time I will introduce to you how to use jquery to obtain the specific content of uploaded files. What are the precautions for using jquery to obtain the content of uploaded files? 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:

How to manage the vue project api interface

node makes a picture verification code when logging in

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