UI | 输入 | 媒体 | 导航 | 其他 | 网页模板| APP模板| 常用代码| 在线代码

jQuery h5拖拽多文件上传

所属分类：输入-上传

 88635  528  查看评论 (106)
分享到微信朋友圈
X
jQuery h5拖拽多文件上传 ie兼容10
 查看演示  立即下载

使用说明

1、拖拽外部文件有四步：

  • 拖拽外部文件，进入目标元素触发

  • 拖拽外部文件，进入目标、离开目标之间，连续触发

  • 拖拽外部文件，离开目标元素触发

  • 拖拽外部文件，在目标元素上释放鼠标触发

在释放鼠标时，可以得到这个事件的ev.originalEvent.dataTransfer.files;这个是一个类数组，每一个即拖拽的文件。

2、input控件：当input控件触发change事件时，可以得到这个文件的this.files属性，它是一个类数组，就是这个控件上传的元素。

3、解析这个类数组。如：

fileObj = ev.originalEvent.dataTransfer.files;
fileObj[0].name上传的单个文件名
fileObj[0].size文件大小
fileObj[0].type文件类型

4、解析了以后在本地展示

5、上传

上传这里要注意：使用

var formData = new FormData();

每一个元素的内容，放入这个对象中如：

formData.append("imageFile" , result);

然后再用ajax上传这个formData对象。

6、这里上传用了进度条，是ajax的progress事件（注意这块）

7、终止上传：

var request = $.ajax({});
request.abort();


相关插件-上传
查看更多

图片预览上传插件bootstrap-fileinput.js

 bootstrapfileinput预览上传图片并使用FmData上传，上传url根据实际情况填写
  上传
 85837  494

jQuery多图上传插件imgUp.js

 可以多图的上传，预览，并带删除功能
  上传
 126504  963

js上传图片预览

 js上传图片本地预览
  上传
 113388  536

jQuery仿淘宝管理商品批量图片上传插件

 jQuery淘宝上传商品图片代码，批量上传插件，（不兼容IE6，7，8）
  上传
 66462  375

讨论这个项目（106）回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    一颗幼稚的心 0
    2024/10/26 20:58:47
    有bug，当文件添加上传后，不刷新页面再次添加上传时，会卡住。 回复
    红妆、 0
    2022/7/13 11:32:11
    急需，感谢各位彭于晏 刘亦菲们 谁发我一份 1315172313@qq.com 回复
    红妆、 0
    2022/7/13 11:31:13
    liuxf8653 0
    2021/3/14 19:55:44
    急：文件提示上传100% ,但文件上传到哪了？本地WEB没找到，目录在哪里改??? 回复
    追梦 0
    2020/6/14 15:19:59
    疯子也有疯子?情调 つ 0
    2020/5/18 9:50:12

    url: "../more/cModifyImageAction.go",s上传失败，没有后台，麻烦楼主看下

    回复
    人生若只如初见 0
    2019/7/5 12:04:49
    没币了，能否发一份 谢谢1585781248@qq.com 回复
    - 0
    2019/5/2 22:43:23
    1327516651@qq.com楼主能给我一份吗 回复
    惑 0
    2019/4/30 13:57:59
    不错的插件
        B`boss0
        2019/12/4 14:37:42
        没有币了 能发我一份吗 1042358887@qq.com
    回复
    starsoul?已认证 0
    2019/3/21 16:03:31
    cModifyImageAction.go这个文件没有吗？上传不了
        (1)?de约肉?0
        2019/4/18 14:29:51
        资源怎么样？
    回复
查看更多评论
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
取消回复