jQuery h5拖拽多文件上传

所属分类:输入-上传

 17845  93  查看评论 (27)
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();


相关插件-上传

Web Uploader文件上传插件

WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件。在现代的浏览器里面能充分发挥HTML5的优势,同时又不摒弃主流IE浏览器,沿用原来的FLASH运行时,兼容IE6+,iOS 6+, android 4+。两套运行时,同样的调用方式,可供用户任意选用。 采用大文件分片并发上传,极大的提高了文件上传效率。
  上传
 131417  301

jquery图片上传

图片上传
  上传
 80759  319

基于Bootstrap 3可预览的HTML5文件上传插件

bootstrapfileinput是一款基于Bootstrap 3.x的HTML5文件上传插件。该文件上传插件带有预览图效果,可同时选择多个文件。该插件使用bootstrap CSS3样式来制作文件上传界面。并且它提供了多国语言,你可以选择使用中文。
  上传
 60336  190

H5移动前端图片批量压缩上传

在移动端压缩图片并且上传主要用到filereader、canvas 以及 fmdata 这三个h5的api
  上传
 30619  86

讨论这个项目(27)回答他人问题或分享插件使用方法奖励jQ币

    .・ along° 0
    2017/6/26 14:23:35
    kedee 0
    2017/6/23 18:59:09

    拖拽文件到虚线框的文字上就无效了

    回复
    春风 0
    2017/6/21 23:40:12
    sczyqxm 0
    2017/6/9 14:46:15

    回复看有没有jq币

    回复
    卢思佳 0
    2017/5/26 10:41:45

    目前看到的文件上传功能做的很好的例子了

    回复
    0
    2017/4/24 14:52:05

    插件效果还是不错的。不过小问题太多了。

    回复
    哦买噶 0
    2017/4/24 12:53:09
    过客5955416655 0
    2017/3/28 19:07:33
    断浪 0
    2017/3/12 20:34:16

    这个插件怎么把文件在后台接收呢?

        颜值爆表的冯先生0
        2017/3/15 11:13:05

        解决了么 怎么在后台接受

        One_ROOM0
        2017/4/1 17:14:56
        上传到哪了??554246706@qq.com  麻烦交流一下
        M&h0
        2017/4/13 23:21:45

        好用吗

        Y*N0
        2017/4/28 16:23:35

        可以给我一个吗?837497854@qq.com

        让世界更美好-M0
        2017/5/14 10:38:17

        我也想下载下来试试看

    回复
    我是你家龙龙老表 0
    2017/2/25 13:08:50

    其实这个插件是有问题的,他源代码中的

    其实是不对的,因该是把文件名放进去sizeObj.push(name),同时修改sizeObj.indexOf(name)!=-1,这样有相同名字的文件才认为是重复,按照他源代码所示是一旦两个文件的大小相同,就会认为是重复,这肯定不对晒!

        月夜丶无痕0
        2017/6/12 14:53:11

        一会下载来看看 

    回复
取消回复