jquery获取上传文件名称、类型和大小的代码分析

  • 更新时间:2020-07-17 09:46:08
  • 编辑:郭文石
为网友们分享了相关的编程文章,网友充琼岚根据主题投稿了本篇教程内容,涉及到jquery、上传文件、名称、类型和大小、通过jquery获取上传文件名称、类型和大小的实现代码相关内容,已被116网友关注,内容中涉及的知识点可以在下方直接下载获取。
  • Web编程基础:CSS、JavaScript、jQuery / 35 MB 推荐度:
  • JavaScript和jQuery实战手册 / 103 MB 推荐度:
  • jQuery Mobile从入门到精通 / 168.7 MB 推荐度:
  • jQuery EasyUI开发指南 / 48.4 MB 推荐度:
  • Web前端开发技术(jQuery+Ajax 慕课版) / 12.23MB 推荐度:
  • 通过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);
      }
    });

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

    相关教程

    用户留言