jQuery h5拖拽多文件上传

所属分类:输入-上传

 74088  472  查看评论 (103)
分享到微信朋友圈
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();


相关插件-上传

手机端实现多图片上传预览

HTML+CSS+原生JS实现手机端实现多图片上传,选中图片后,可以点击放大(有一定的注释,在PC,ipad,IOS和安卓上都测试过)
  上传
 27010  276

jQuery图片上传,带剪切功能

jQuery图片上传,适用移动端,带剪切功能,支持手势调节图片大小
  上传
 32362  296

基于webuploader多图片上传插件diyUpload.js

多张图片上传 base64格式 移动端可支持,代码中有详细注释。
  上传
 78163  517

jquery多图片上传

多张图片上传,显示
  上传
 273750  760

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

    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
    现在是上传完了 把上传的插件给隐藏掉了,如果不隐藏的话怎么操作 回复
    以我之姓, 0
    2018/11/20 17:05:01
    这个怎么进行继续上传???? 回复
    冰雨 0
    2018/11/5 11:27:20
    能发给我一份吗
        rxb270
        2019/5/15 22:02:43
        可以
        _感觉0
        2019/10/12 11:05:43
        可以发一份吗谢谢 460902326@qq.com
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复