jQuery h5拖拽多文件上传

所属分类:输入-上传

 87695  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();


相关插件-上传

支持IE8的多文件、多图异步上传并能预览的插件

该插件是基于百度webuploader的一个插件,支持IE8,可以上传任何文件,上传图片可以预览,异步上传,使用非常方便
  上传
 64136  361

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

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

html5文件上传插件Pure HTML5 file upload

html5文件上传插件Pure HTML5 file upload
  上传
 79479  381

zyupload图片上传修改版

在原zyupload基础上增加了放大,删除,目录选择功能 。上传的图片可以轮播查看, 上传图片有拖拽图片和文件功能
  上传
 59262  382

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