通过jquery获取上传文件名称、类型和大小的实现代码

在文件上传到服务器之前，我们可以通过jquery来获取上传文件的名称，类型和尺寸大小。

通常情况下，当用户通过<input type='file'>标签来上传文件时，我们可以看到上传文件的名称。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);
  }
});

这篇文章就介绍到这了，需要的朋友可以参考一下。

赞 (0)

相关推荐

  • jQuery统计上传文件大小的方法

    jQuery统计上传文件大小的方法

    本文实例讲述了jQuery统计上传文件大小的方法.分享给大家供大家参考.具体如下: 对于现代浏览器(支持html5)来说,在客户端统计上传文件的大小,可以通过$(selector)[0].files[0].size来实现.但在老版本的IE浏览器中,比如IE7,IE8或IE9,却不支持这种做法,但可以借助ActiveXObject对象来实现. 复制代码 代码如下: <input type="file" name="f" id="f" valu

  • jquery实现上传文件大小类型的验证例子(推荐)

    jquery实现上传文件大小类型的验证例子(推荐) <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="jquery1.8/jquery-1.8.0.js" type="text/javascript"

  • jQuery简单验证上传文件大小及类型的方法

    本文实例讲述了jQuery简单验证上传文件大小及类型的方法.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="jquery1.8/jquery-1.8.0.js" type="

  • jQuery获取上传文件的名称的正则表达式

    方法一: $('input[type="file"]').on('change', function() { var reg = /[^\\\/]*[\\\/]+/g; //匹配文件的名称和后缀的正则表达式 var name = $(this).val().replace(reg, ''); var postfix = /\.[^\.]+/.exec(name);//获取文件的后缀 var text =name.substr(0,postfix['index']);//获取没有后缀的名

  • 限制上传文件大小和格式的jQuery插件实例

    本文实例讲述了限制上传文件大小和格式的jQuery插件.分享给大家供大家参考.具体分析如下: 在客户端上传文件,通常需要限制文件的尺寸和格式,最常用的做法是使用某款插件,一些成熟的插件的确界面好看,且功能强大,但美中不足的是:有时候会碰到浏览器兼容问题.本篇就来写一个"原生态"的jQuery插件,使之能限制上传文件的大小和格式. 首先,写一个名称为checkFileTypeAndSize.js的插件.通过判断当前文件的后缀名是否被包含在预先设置所允许的后缀名数组中,来限制文件格式:通过

  • 通过jquery获取上传文件名称、类型和大小的实现代码

    在文件上传到服务器之前,我们可以通过jquery来获取上传文件的名称,类型和尺寸大小. 通常情况下,当用户通过<input type='file'>标签来上传文件时,我们可以看到上传文件的名称.HTML5 File API为我们提供了一种安全的方式,让我们在客户端访问计算机中的文件,并更好的对这些文件执行操作. 支持File API的浏览器有IE10+,Firefox4+,Safari5.0.5+,Opera11.1+和Chrome. File API在表单的文件输入字段的基础上,又添加了一些

  • js判断上传文件的类型和大小示例代码

    复制代码 代码如下: //检测文件大小和类型 function fileChange(target){ //检测上传文件的类型 if(!(/(?:jpg|gif|png|jpeg)$/i.test(target.value))) { alert("只允许上传jpg|gif|png|jpeg格式的图片"); if(window.ActiveXObject) {//for IE target.select();//select the file ,and clear selection d

  • jQuery.Form上传文件操作

    建立test文件夹 PHP代码: <?php //var_dump($_FILES['file']);exit; if(isset($_GET['option']) && $_GET['option']=='delete'){ @file_put_contents(dirname(__FILE__)."/------------0.txt", $_GET['path']."\r\n",FILE_APPEND); unlink($_GET['pa

  • 利用jQuery异步上传文件的插件用法详解

    现在想实现用ajax来上传文件的功能,但是却发现Jquery自带的ajax方法只能上传文件名,而不能上传文件:用form提交虽然能够上传文件,但是却要刷新页面...多方查找下找到了一个可用的jQuery插件,刚好可以满足异步上传文件的要求. 代码 jquery.form.js 用法 这个插件是基于表单提交的,我们只要正常的写一段提交文件的表单,如: <form id="myForm" action="comment.php" method="post

  • Jquery异步上传文件代码实例

    这篇文章主要介绍了Jquery异步上传文件代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 一,view代码 <form role="form"> <div class="form-group"> <label for="keyinput">选择文件:</label> <input type="file" name=

  • JavaScript获取上传文件相关信息示例详解

    目录 前题场景 处理方式 图片文件 音频文件 判断处理 分析总结 前题场景 在开发过程中,文件上传是再熟悉不过的场景了,但是根据实际使用情况对上传文件的限制又各有不同.需要对本地上传文件进行相应的限制处理,防止不符合规则或者要求的文件上传到云存储中,从而造成云盘资源空间浪费. 与此同时,也在给客户端使用文件信息之前做了一次数据过滤处理,减少客户端对文件资源的处理和校验. 处理方式 因为客户端使用后台管理上传的图片文件和音频文件时,为了优化展示效果和加载的速度,所以在后台管理系统上传处希望依据图片

  • 定制FileField中的上传文件名称实例

    FileField中的upload_to属性可以设定上传文件的存储目录和名称,它可以是个字符串,也可以是个callable,比如一个方法. 当upload_to的值设为一个方法时,就可以对上传文件的名称进行修改了.方法需要两个参数,instance与filename,instance为此FileField所属的Model实例,filename为上传文件的名称. 举例: def user_directory_path(instance, filename): # file will be uplo

  • C#检测上传文件真正类型的方法

    本文实例讲述了C#检测上传文件真正类型的方法.分享给大家供大家参考.具体分析如下: 对于用户上传的文件如果只是根据扩展名判断,很容易上传上来可执行文件,这是非常危险的,这段代码可以在服务器端检测上传文件的真实类型. <%@ Page Language="C#" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xh

  • js获取上传文件的绝对路径实现方法

    在html中 <input type="file" id="importFile" /> <input type="button" onclick="upload()"/> <script> function upload() { var filename = document.getElementById("importFile").value; // 这时的filen

随机推荐