jQuery h5拖拽多文件上传

所属分类:输入-上传

 32085  141  查看评论 (65)
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 789.在一个界面上展示到固定标签业务场景:答题添加图片匹配题目一个选项一个题目
  上传
 14835  119

jQuery多图上传带ajax提交

jQuery多图上传可删除,可以本地预览带前台接口
  上传
 28526  161

图片上传插件

图片上传插件
  上传
 38951  93

html5 头像上传更换插件

html5 头像上传、更换、剪切插件
  上传
 95683  756

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

    abugs 0
    2018/4/9 12:42:11
    为什么只能上传一个文件?多个文件不支持吗? 回复
    . 0
    2018/3/21 13:45:58
    回复看有没有jq币 回复
    哇哈哈 0
    2018/3/8 14:47:55
    目前看到的文件上传功能做的很好的例子了 回复
    helloworldlqq 0
    2018/3/7 15:32:15
    可不可以发一份源码给我? qq 1736743891 谢谢!
        SmileNiche0
        2018/3/13 16:36:48
        你有了吗
    回复
    ??? 0
    2018/2/7 11:11:29
    这个插件每次上传成功后有没有办法把所有的数据和功能重置一下,然后接着上传?
        ???1
        2018/2/7 11:22:06

        我自己把问题解决了(上传成功后,自动删除表中的那一行),分享一下我的代码吧

        //ofilebtn.off(); //注释掉这个,上传按钮就能接着用了
        //ofilelist.off();//取消删除事件
        licong110
        2018/3/16 15:00:20
        能给发一份源码吗? qq:878586995 谢谢
    回复
    缘来你挡不住 0
    2018/1/18 19:13:42
    jenny_yin 0
    2018/1/16 14:34:13
    //点击选择文件按钮选文件
    oFileInput.on("change", function() {
        console.log(1);
        analysisList(this.files);
        $("#fileInput").replaceWith('<input type="file" multiple id="fileInput" />');
        oFileInput = $("#fileInput");
        oFileInput.on("change", function() {
            console.log(2);
            analysisList(this.files);
        });
    });

    文本框只能绑定一次onchange事件,所以把列表删除完之后重新上传添加不上就是因为没有绑定到onchange事件,采用上述方法可以解决

    回复
    jenny_yin 0
    2018/1/16 14:03:15

    sizeObj.splice(2*index,2*index+1); //删除文件大小数组中的项   正确写法

        jenny_yin0
        2018/1/16 14:06:24

        sizeObj.splice(2*index,2); //删除文件大小数组中的项

    回复
    小酱油 0
    2017/12/22 10:52:39
    上传一个文件 然后点击删除   然后再次上传那个文件上传不了    这怎么解决??
        jenny_yin0
        2018/1/16 13:24:51

        插件里面sizeObj在删除的时候他只删除了文件名,没有删除文件大小,见下图,而楼主去重是用文件大小来判断的,建议去重采用文件大小和文件名一起判断,然后删除的时候是删除两项sizeObj.splice(index,2); //删除文件大小数组中的项

        jenny_yin0
        2018/1/16 13:34:11

        splice() 方法向/从数组中添加/删除项目,然后返回被删除的项目。

    回复
    natalie886 0
    2017/12/4 15:07:19
    如果有图片预览功能就更好了 回复
取消回复