首頁  >  文章  >  web前端  >  使用jquery取得上傳文件具體內容

使用jquery取得上傳文件具體內容

php中世界最好的语言
php中世界最好的语言原創
2018-06-07 11:10:284200瀏覽

這次帶給大家使用jquery取得上傳文件具體內容,使用jquery取得上傳文件內容的注意事項有哪些,以下就是實戰案例,一起來看一下。

在檔案上傳到伺服器之前,我們可以透過jquery來取得上傳檔案的名稱,類型和尺寸大小。

通常情況下,當使用者透過標籤來上傳檔案時,我們可以看到上傳檔案的名稱。 HTML5 File API為我們提供了一種安全的方式,讓我們在客戶端存取電腦中的文件,並更好的對這些文件執行操作。

支援File API的瀏覽器有IE10 ,Firefox4 ,Safari5.0.5 ,Opera11.1 和Chrome。

File API在表單的文件輸入欄位的基礎上,又增加了一些直接存取文件資訊的介面。 HTML5在DOM中為檔案輸入元素新增了一個files集合。透過文件輸入欄位選擇了一個或多個文件時,files集合中包含一組File對象,每個File對象對應一個文件。每個檔案都有下列的唯讀屬性:

  • name:本機檔案系統中的檔案名稱。

  • size:檔案的位元組數。

  • type:檔案的MIME類型。

  • lastModifiedDate:檔案上一次被修改的時間。

透過這個files接口,我們就可以在jquery中取得上傳檔案的名稱,類型和尺寸大小。透過下面的demo來體驗一下效果。

1、透過「選擇文件」按鈕來選擇要上傳的文件,可以選擇多個文件。

2、選擇檔案後點選「顯示上傳檔案的詳細資料」按鈕以查看檔案的詳細資料。

要同時上傳多個文件,需要在文件上傳標籤中新增multiple屬性。上面demo的HTML結構如下:

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

在jquery程式碼中,首先偵測被選取檔案的數量,然後透過一個循環來分別取得每個檔案的詳細資訊。完整的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);
  }
});

相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

推薦閱讀:

怎麼對vue項目api介面進行管理

node做出登入時圖片驗證碼

以上是使用jquery取得上傳文件具體內容的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn