0

0

如何使用jquery获取上传文件名称、类型和大小

php中世界最好的语言

php中世界最好的语言

发布时间:2018-06-02 14:42:28

|

2390人浏览过

|

来源于php中文网

原创

这次给大家带来如何使用jquery获取上传文件名称、类型和大小,使用jquery获取上传文件名称、类型和大小的注意事项有哪些,下面就是实战案例,一起来看一下。

通常情况下,当用户通过标签来上传文件时,我们可以看到上传文件的名称。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结构如下:


在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 += "
  • " + fileName + " (" + fileSize + " bytes) - Type :" + fileType + "
  • "; } $("#ulList").append(fragment); } });

    相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

    推荐阅读:

    如何操作vue-cli项目中使用bootstrap

    SlidesAI
    SlidesAI

    使用SlidesAI的AI在几秒钟内创建演示文稿幻灯片

    下载

    如何操作JS获取用户所在城市及地理位置

    相关专题

    更多
    excel制作动态图表教程
    excel制作动态图表教程

    本专题整合了excel制作动态图表相关教程,阅读专题下面的文章了解更多详细教程。

    20

    2025.12.29

    freeok看剧入口合集
    freeok看剧入口合集

    本专题整合了freeok看剧入口网址,阅读下面的文章了解更多网址。

    65

    2025.12.29

    俄罗斯搜索引擎Yandex最新官方入口网址
    俄罗斯搜索引擎Yandex最新官方入口网址

    Yandex官方入口网址是https://yandex.com;用户可通过网页端直连或移动端浏览器直接访问,无需登录即可使用搜索、图片、新闻、地图等全部基础功能,并支持多语种检索与静态资源精准筛选。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

    197

    2025.12.29

    python中def的用法大全
    python中def的用法大全

    def关键字用于在Python中定义函数。其基本语法包括函数名、参数列表、文档字符串和返回值。使用def可以定义无参数、单参数、多参数、默认参数和可变参数的函数。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

    16

    2025.12.29

    python改成中文版教程大全
    python改成中文版教程大全

    Python界面可通过以下方法改为中文版:修改系统语言环境:更改系统语言为“中文(简体)”。使用 IDE 修改:在 PyCharm 等 IDE 中更改语言设置为“中文”。使用 IDLE 修改:在 IDLE 中修改语言为“Chinese”。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

    16

    2025.12.29

    C++的Top K问题怎么解决
    C++的Top K问题怎么解决

    TopK问题可通过优先队列、partial_sort和nth_element解决:优先队列维护大小为K的堆,适合流式数据;partial_sort对前K个元素排序,适用于需有序结果且K较小的场景;nth_element基于快速选择,平均时间复杂度O(n),效率最高但不保证前K内部有序。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

    12

    2025.12.29

    php8.4实现接口限流的教程
    php8.4实现接口限流的教程

    PHP8.4本身不内置限流功能,需借助Redis(令牌桶)或Swoole(漏桶)实现;文件锁因I/O瓶颈、无跨机共享、秒级精度等缺陷不适用高并发场景。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

    134

    2025.12.29

    抖音网页版入口在哪(最新版)
    抖音网页版入口在哪(最新版)

    抖音网页版可通过官网https://www.douyin.com进入,打开浏览器输入网址后,可选择扫码或账号登录,登录后同步移动端数据,未登录仅可浏览部分推荐内容。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

    63

    2025.12.29

    快手直播回放在哪看教程
    快手直播回放在哪看教程

    快手直播回放需主播开启功能才可观看,主要通过三种路径查看:一是从“我”主页进入“关注”标签再进主播主页的“直播”分类;二是通过“历史记录”中的“直播”标签页找回;三是进入“个人信息查阅与下载”里的“直播回放”选项。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

    18

    2025.12.29

    热门下载

    更多
    网站特效
    /
    网站源码
    /
    网站素材
    /
    前端模板

    精品课程

    更多
    相关推荐
    /
    热门推荐
    /
    最新课程
    jQuery 教程
    jQuery 教程

    共42课时 | 3.6万人学习

    HTML+CSS基础与实战
    HTML+CSS基础与实战

    共132课时 | 9.3万人学习

    tp6+adminlte搭建通用后台
    tp6+adminlte搭建通用后台

    共39课时 | 5.7万人学习

    关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
    php中文网:公益在线php培训,帮助PHP学习者快速成长!
    关注服务号 技术交流群
    PHP中文网订阅号
    每天精选资源文章推送

    Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号