html 获取js文件大小,JQuery获得上传文件名称、大小、类型、数量的方法

本文介绍如何在将文件上传到服务器之前用JQuery获取文件名、文件大小(以字节为单位)、文件类型(文本/ PDF / CSS文件)和总选定文件数量。

基本上，当用户使用输入文件标签选择任何文件时，我们将显示其名称，大小和所选文件的总数。

使用File界面，我们可以获取有关文件的信息并允许访问其内容。

在上传之前显示文件名，大小，计数的步骤HTML标记：添加具有多个属性的输入标记。

jQuery代码：使用File API访问文件内容。

效果图

Html标记

我们首先添加输入文件标签，按钮标签和UL列表标签。

要进行多个文件选择，我们需要在文件标记中添加多个(HTML5属性)。 UL标签用于显示每个选定的文件信息，例如(名称，大小，类型)。

使用Html5 FileReader，我们也可以在文件上传之前预览图像。 我们的HTML标记如下所示。

jQuery代码：获取文件信息(名称，大小，类型)

首先我们检查文件长度，即选择的任何文件，然后只进行for循环以获取文件信息。 最终代码如下所示。

$("#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; //获得文件类型

//在UL标签显示文件信息

fragment += "

" + fileName + " ( " + fileSize + " bytes) - Type :" + fileType + "";

}

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

}

});

完整HTML代码

$(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; //获得文件类型

//在UL标签显示文件信息

fragment += "

" + fileName + " " + fileSize + " bytes. Type :" + fileType + "";

}

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

}

});

});