jQuery h5拖拽多文件上传

所属分类:输入-上传

 87170  526  查看评论 (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();


相关插件-上传

jQuery图片上传预览支持拖拽

上传单个图片,同时支持将图片拖拽在框中
  上传
 63165  417

html5 头像上传更换插件

html5 头像上传、更换、剪切插件
  上传
 172388  1328

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

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

zyupload四种不同的上传PHP版

PHP支持拖拽和裁剪的一款上传插件:zyupload。在js里面可以自定义高度和宽度,类型,远程上传地址等。
  上传
 90969  400

讨论这个项目(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
    现在是上传完了 把上传的插件给隐藏掉了,如果不隐藏的话怎么操作 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复