html4多文件上传,jQuery h5拖拽多文件上传

28e6ce2ca43a9b905b8b990af368fa18.png

94a6dc5feabd4193c6b752bf51a273a1.png

插件描述:可用input控件选择文件,也可以拖拽文件,可以一次上传多个文件,测试需要后台配合,支持失败重传,支持过滤文件类型,文件大小,及同一文件重复上传。

使用说明

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();

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值