jQuery h5拖拽多文件上传

所属分类:输入-上传

 25237  119  查看评论 (49)
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();


相关插件-上传

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

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

jQuery文件上传插件angularfileupload

angular-file-upload 是一款轻量级的 AngularJS 文件上传工具,为不支持浏览器的 FileAPI polyfill 设计,使用 HTML5 直接进行文件上传。
  上传
 40975  94

jQuery图像裁剪插件croppic

croppic图像裁剪将满足您的需求,图像加载效果、展现效果以及裁剪都非常棒,相信您看Demo后一定会喜欢上此插件.
  上传
 71674  107

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

bootstrapfileinput预览上传图片并使用FmData上传,上传url根据实际情况填写
  上传
 15227  72

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

    幕兮_ 0
    2017/11/20 10:57:09

    接收radio的值守怎样的呀?看半天没进展。层主

    回复
    BigDream 0
    2017/11/10 11:02:17

    能不能不要jq币啊?

    回复
    huangda2100 0
    2017/11/6 17:09:20

    想试一下这个插件

    回复
    说书人 0
    2017/9/30 16:58:49

    谁能给我・发一份,1696019458@QQ.com,谢谢

    回复
    0
    2017/9/25 15:57:02
    航嘉 0
    2017/9/22 16:52:25

    很好用的插件!

        0
        2017/9/25 15:59:12

        上传之后 要删除怎么做?

    回复
    雨中漫步 0
    2017/9/12 13:37:30
    メīаo、脚冰凉 0
    2017/9/7 17:17:28

    插件很好,楼主说明也非常好

    回复
    1?5?8?0?7?3?3?4?0?0?0? 0
    2017/8/23 1:04:11

    很好的插件,确认可以用! 谢谢楼主

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

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

    回复
取消回复