這篇文章將為大家詳細講解有關如何通過jquery獲取上傳文件名稱、類型和大小，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

網(wǎng)站建設哪家好，找創(chuàng)新互聯(lián)建站！專注于網(wǎng)頁設計、網(wǎng)站建設、微信開發(fā)、微信平臺小程序開發(fā)、集團企業(yè)網(wǎng)站建設等服務項目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了七星免費建站歡迎大家使用！

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

通常情況下，當用戶通過標簽來上傳文件時，我們可以看到上傳文件的名稱。HTML5 File API為我們提供了一種安全的方式，讓我們在客戶端訪問計算機中的文件，并更好的對這些文件執(zhí)行操作。

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

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

• name：本地文件系統(tǒng)中的文件名。

• size：文件的字節(jié)數(shù)。

• type：文件的MIME類型。

• lastModifiedDate：文件上一次被修改的時間。

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

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

2、選擇文件后點擊“顯示上傳文件的詳細信息”按鈕來查看文件的詳細信息。

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

在jquery代碼中，首先檢測被選擇文件的數(shù)量，然后通過一個循環(huán)來分別獲取每個文件的詳細信息。完整的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 += "
" + fileName + " (" + fileSize + " bytes) - Type :" + fileType + "
";
    }
 
    $("#ulList").append(fragment);
  }
});

jquery是什么

jquery是一個簡潔而快速的JavaScript庫，它具有獨特的鏈式語法和短小清晰的多功能接口、高效靈活的css選擇器，并且可對CSS選擇器進行擴展、擁有便捷的插件擴展機制和豐富的插件，是繼Prototype之后又一個優(yōu)秀的JavaScript代碼庫，能夠用于簡化事件處理、HTML文檔遍歷、Ajax交互和動畫，以便快速開發(fā)網(wǎng)站。

關于“如何通過jquery獲取上傳文件名稱、類型和大小”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。