jQuery h5拖拽多文件上传

所属分类:输入-上传

 82965  513  查看评论 (105)
分享到微信朋友圈
X
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();


相关插件-上传

pc端图片批量上传,可拖动图片交换位置

jQuery可批量上传图片 可以拖动交换位置 可删除
  上传
 60169  449

jQuery多图上传

jQuery多图图片上传.net后端以写好,直接使用
  上传
 77029  457

zyupload图片上传修改版V2.0

在原zyupload基础上增加了放大,删除,目录选择功能 。同时修改了原作者中的删除图片后该图片不能再次上传的BUG
  上传
 51578  367

jQuery多图上传带ajax提交

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

讨论这个项目(105)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    红妆、 0
    2022/7/13 11:32:11
    急需,感谢各位彭于晏 刘亦菲们 谁发我一份 1315172313@qq.com 回复
    红妆、 0
    2022/7/13 11:31:13
    liuxf8653 0
    2021/3/14 19:55:44
    急:文件提示上传100% ,但文件上传到哪了?本地WEB没找到,目录在哪里改??? 回复
    追梦 0
    2020/6/14 15:19:59
    疯子也有疯子?情调 つ 0
    2020/5/18 9:50:12

    url: "../more/cModifyImageAction.go",s上传失败,没有后台,麻烦楼主看下

    回复
    人生若只如初见 0
    2019/7/5 12:04:49
    没币了,能否发一份 谢谢1585781248@qq.com 回复
    - 0
    2019/5/2 22:43:23
    1327516651@qq.com楼主能给我一份吗 回复
    0
    2019/4/30 13:57:59
    不错的插件
        B`boss0
        2019/12/4 14:37:42
        没有币了 能发我一份吗 1042358887@qq.com
    回复
    starsoul?已认证 0
    2019/3/21 16:03:31
    cModifyImageAction.go这个文件没有吗?上传不了
        (1)?de约肉?0
        2019/4/18 14:29:51
        资源怎么样?
    回复
    以我之姓, 0
    2018/11/20 17:05:39
    现在是上传完了 把上传的插件给隐藏掉了,如果不隐藏的话怎么操作 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复