jQuery h5拖拽多文件上传

所属分类:输入-上传

 20889  103  查看评论 (38)
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();


相关插件-上传

多图片上传预览(纯前端)

多图片上传预览,已测试ie 360 火狐 谷歌浏览器
  上传
 148606  250

jQuery多图上传

jQuery多图图片上传.net后端以写好,直接使用
  上传
 15872  67

jQuery多图上传图片上传精简版

配置简单功能强大支持进度条限制上传类型文件大小文件数量轻松配置后端值需要写个接口接收文件返回指定信息便可轻松搞定。
  上传
 2123  16

html5 头像上传更换插件

html5 头像上传、更换、剪切插件
  上传
 69727  595

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

    古德 0
    2017/8/11 17:34:17

    能不能发我一份1227597654@qq.com谢谢!!

    回复
    ayujuanb 0
    2017/8/10 16:01:29
    热的与太阳肩并肩 0
    2017/7/24 9:08:56
    有ASP.net MVC的demo嘛 回复
    嗳洲 0
    2017/7/21 14:29:21
    咋那么好用的插件呢 回复
    幕后? 0
    2017/7/17 17:53:29
    冷风残月 0
    2017/7/12 9:06:24
    MonicaDai 0
    2017/7/11 17:41:47
    I'm Fan 0
    2017/7/5 14:12:22

    这个插件好用么

        Z0
        2017/7/17 15:21:18

        好用

    回复
    星星 0
    2017/7/3 19:13:57
    .・ along° 0
    2017/6/26 14:23:35
取消回复