快捷導(dǎo)航

通過jquery獲取上傳文件名稱、類型和大小的實(shí)現(xiàn)代碼

更新時(shí)間：2018年04月19日 22:52:35 投稿：mdxy-dxy

這篇文章主要介紹了在文件上傳到服務(wù)器之前，我們可以通過jquery來獲取上傳文件的名稱，類型和尺寸大小,需要的朋友可以參考下

在文件上傳到服務(wù)器之前，我們可以通過jquery來獲取上傳文件的名稱，類型和尺寸大小。

通常情況下，當(dāng)用戶通過<input type='file'>標(biāo)簽來上傳文件時(shí)，我們可以看到上傳文件的名稱。HTML5 File API為我們提供了一種安全的方式，讓我們?cè)诳蛻舳嗽L問計(jì)算機(jī)中的文件，并更好的對(duì)這些文件執(zhí)行操作。

支持File API的瀏覽器有IE10+，F(xiàn)irefox4+，Safari5.0.5+，Opera11.1+和Chrome。

File API在表單的文件輸入字段的基礎(chǔ)上，又添加了一些直接訪問文件信息的接口。HTML5在DOM中為文件輸入元素添加了一個(gè)files集合。通過文件輸入字段選擇了一個(gè)或多個(gè)文件時(shí)，files集合中包含一組File對(duì)象，每個(gè)File對(duì)象對(duì)應(yīng)著一個(gè)文件。每個(gè)文件都有下列的只讀屬性：

name：本地文件系統(tǒng)中的文件名。
size：文件的字節(jié)數(shù)。
type：文件的MIME類型。
lastModifiedDate：文件上一次被修改的時(shí)間。

通過這個(gè)files接口，我們就可以在jquery中獲取上傳文件的名稱，類型和尺寸大小。通過下面的demo來體驗(yàn)一下效果。

1、通過“選擇文件”按鈕來選擇要上傳的文件，可以選擇多個(gè)文件。

2、選擇文件后點(diǎn)擊“顯示上傳文件的詳細(xì)信息”按鈕來查看文件的詳細(xì)信息。

要同時(shí)上傳多個(gè)文件，需要在文件上傳標(biāo)簽中添加multiple屬性。上面demo的HTML結(jié)構(gòu)如下：

<input id="fUpload" multiple type="file" /><br />
<ul id="ulList">
</ul>
<input id="btnShow" type="button" value="顯示上傳文件的詳細(xì)詳細(xì)" />

在jquery代碼中，首先檢測(cè)被選擇文件的數(shù)量，然后通過一個(gè)循環(huán)來分別獲取每個(gè)文件的詳細(xì)信息。完整的jquery代碼如下：

$("#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);
  }
});

這篇文章就介紹到這了，需要的朋友可以參考一下。

您可能感興趣的文章: