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

- 日理万妓 2022-10-06 10:56 248阅读 0赞

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

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

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

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

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

效果图

![b3a813065adb9daf294a8f43b949393b.gif][]

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);

\}

\});

\});

[b3a813065adb9daf294a8f43b949393b.gif]: /images/20221005/82b44dbb35f4491fb37e6e46efdd7296.png

发表评论取消回复

表情：

评论列表（有 0 条评论，248人围观）

还没有评论，来说两句吧...

相关阅读

相关 js判断上传文件大小

兼容ie6，ie7，ie8 ，Google Chrome，ff等浏览器，ie8上面在安全设置处设置一下就好了(工具 => Internet选项 => 安全 => Interne

电玩女神/ 2023年10月16日 20:28/ 0 赞/ 2 阅读

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

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

- 日理万妓/ 2022年10月06日 10:56/ 0 赞/ 249 阅读

相关文件上传文件大小和类型

文件上传文件大小和类型一、文件上传 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text

偏执的太偏执、/ 2022年09月07日 05:58/ 0 赞/ 187 阅读

相关文件上传判断大小和类型

html: <input type="file"> javascript: // 实现文件上传的类型和大小约束 document.querySel

曾经终败给现在/ 2022年08月28日 07:43/ 0 赞/ 138 阅读

相关 PHP之获取上传文件大小

//返回文件大小 public function formatsize($size) { $arr = array('Byte', '

短命女/ 2022年07月12日 10:29/ 0 赞/ 299 阅读

相关 js获取upload上传的文件属性(大小、名称、修改时间、类型等)

文件上传下载在日常开发中是常用的功能。但是因业务要求，经常对上传的文件做限制要求，如只能上传jpg格式的图片，仅能上传xls的excel表格(xls和xlsx的内容读写j

一时失言乱红尘/ 2022年05月19日 14:22/ 0 赞/ 1128 阅读

相关 HTML 上传文件、过滤类型以及显示大小

HTML： <h>文件上传只支持.xlsx格式</h> <form action="/upload" method="post" enctype="m

小鱼儿/ 2022年05月09日 13:24/ 0 赞/ 240 阅读

相关 js验证上传文件大小、类型等

<script> function check() { var str=document.chuan.wen.value; if (st

傷城~/ 2022年02月23日 20:08/ 0 赞/ 339 阅读

相关 Jquery获取上传文件/照片的大小

添加实名认证创建于 2019/05/07 <div class="m_reallist"> <form action="/use

曾经终败给现在/ 2022年02月21日 00:23/ 0 赞/ 179 阅读

相关 JQuery获得上传文件名称大小类型数量的方法

本文介绍如何在将文件上传到服务器之前用JQuery获取文件名、文件大小（以字节为单位）、文件类型（文本/ PDF / CSS文件）和总选定文件数量。基本上，当用户使用输入文

￡神魔★判官ぃ/ 2021年06月26日 16:06/ 0 赞/ 370 阅读