jQuery h5拖拽多文件上传

所属分类:输入-上传

 28050  131  查看评论 (57)
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();


相关插件-上传

基于amazeui头像上传

基于amazeui框架,设计的头像上传插件
  上传
 25766  152

js上传图片预览

js上传图片本地预览
  上传
 55426  201

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

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

图片上传插件zyupload java版实例代码

本插件经本人多次修改完善,功能齐全,支持多图片上传、拖拽上传、剪辑、编辑,上传预览,编辑获取默认值等功能,并且每一个功能对应一个demo,简单易懂,方便学习修改
  上传
 64611  408

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

    缘来你挡不住 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
    如果有图片预览功能就更好了 回复
    幕兮_ 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
取消回复