最新国产精品拍在线观看,久久久久久久香蕉国产30分钟

技術(shù)頻道 - js技術(shù)

JQuery獲得上傳文件名稱(chēng)、大小、類(lèi)型、數(shù)量的方法

作者:admin 時(shí)間:2019-3-13 17:34:8 瀏覽:

本文介紹如何在將文件上傳到服務(wù)器之前用JQuery獲取文件名、文件大?。ㄒ宰止?jié)為單位）、文件類(lèi)型（文本/ PDF / CSS文件）和總選定文件數(shù)量。

基本上，當(dāng)用戶使用輸入文件標(biāo)簽選擇任何文件時(shí)，我們將顯示其名稱(chēng)，大小和所選文件的總數(shù)。

使用File界面，我們可以獲取有關(guān)文件的信息并允許訪問(wèn)其內(nèi)容。

在上傳之前顯示文件名，大小，計(jì)數(shù)的步驟

HTML標(biāo)記：添加具有多個(gè)屬性的輸入標(biāo)記。
jQuery代碼：使用File API訪問(wèn)文件內(nèi)容。

效果圖

Html標(biāo)記

我們首先添加輸入文件標(biāo)簽，按鈕標(biāo)簽和UL列表標(biāo)簽。

要進(jìn)行多個(gè)文件選擇，我們需要在文件標(biāo)記中添加多個(gè)（HTML5屬性）。 UL標(biāo)簽用于顯示每個(gè)選定的文件信息，例如（名稱(chēng)，大小，類(lèi)型）。

使用Html5 FileReader，我們也可以在文件上傳之前預(yù)覽圖像。我們的HTML標(biāo)記如下所示。

jQuery代碼：獲取文件信息（名稱(chēng)，大小，類(lèi)型）

首先我們檢查文件長(zhǎng)度，即選擇的任何文件，然后只進(jìn)行for循環(huán)以獲取文件信息。最終代碼如下所示。

$("#btnShow").on('click', function () {
$("#ulList").empty();
var fp = $("#fUpload");
var lg = fp[0].files.length;
var items = fp[0].files;
var fragment = "";

if (lg > 0) {
for (var i = 0; i < lg; i++) {
var fileName = items[i].name; //獲得文件名
var fileSize = items[i].size; //獲得文件大小
var fileType = items[i].type; //獲得文件類(lèi)型

//在UL標(biāo)簽顯示文件信息
fragment += "<li>" + fileName + " (<b>" + fileSize + "</b> bytes) - Type :" + fileType + "</li>";
}

$("#ulList").append(fragment);
}
});

完整HTML代碼

<html>
<head>
</head>
<body>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><br/>
<input id="fUpload" multiple type="file"/>
<ul id="ulList"></ul>
<input id="btnShow" type="button" value="Show"/><br/>
<script>
$(document).ready(function(){
$("#btnShow").on('click', function () {
$("#ulList").empty();
var fp = $("#fUpload");
var lg = fp[0]
.files.length;
var items = fp[0].files;
var fragment = "";
if (lg > 0) {
for (var i = 0; i < lg; i++) {
var fileName = items[i].name; //獲得文件名
var fileSize = items[i].size; //獲得文件大小
var fileType = items[i].type; //獲得文件類(lèi)型
//在UL標(biāo)簽顯示文件信息
fragment += "<li>" + fileName + " " + fileSize + " bytes. Type :" + fileType + "</li>";
}
$("#ulList").append(fragment);
}
});
});
</script>
</body>
</html>