jQuery h5拖拽多文件上传

所属分类:输入-上传

 14192  81  查看评论 (20)
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();


相关插件-上传

HTML5 图片上传(pc ,手机都能适配)

图片上传(pc ,手机都能适配)
  上传
 54389  87

Web文件上传模块Plupload

Plupload 是一个Web浏览器上的界面友好的文件上传模块,可显示上传进度、图像自动缩略和上传分块。可同时上传多个文件。
  上传
 28097  16

BootstrapFileInput 图片上传插件 详解

样式非常美观,并且支持上传文件预览,ajax同步或异步上传,拖曳文件上传等炫酷的功能,完全没有理由不去使用
  上传
 180341  107

基于H5的图片拖拽和预览插件dropify

基于HTML5,能支持将本地图片拖入网页并预览图片的插件。
  上传
 13945  59

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

    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

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

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

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

    回复
    尹铭 0
    2017/2/10 15:18:22
    这个插件怎么用啊,不知道怎么才能把file传到后台 回复
    小蜗牛 0
    2017/2/9 17:04:12

    厉害,看效果很厉害

        0
        2017/3/21 17:57:35
        确实很厉害
    回复
    葫芦柳柳 0
    2017/2/8 17:41:53

    不好意思 解决啦  非常好用

        One_ROOM0
        2017/4/7 8:53:58

        上传到哪啊??? QQ554246706  麻烦交流一下 万分感谢!!!

        Y*N0
        2017/4/28 16:25:44

        可以分享一个给我吗?837497854@qq.com,非常感谢

    回复
    葫芦柳柳 0
    2017/2/8 16:51:51

    文件传到那里去啦呀  我用的是php

        尹铭0
        2017/2/10 15:20:09

        你知道文件传到哪里了?

    回复
    zhixunqiu 0
    2016/12/29 14:12:26
取消回复