jQuery文件上传(带进度条)

所属分类:输入-上传

 27915  152  查看评论 (33)
分享到微信朋友圈
X
jQuery文件上传(带进度条) ie兼容10

更新时间:2020-11-29 22:10:34

更新说明:新增fileChangeEnd(file)  ;返回上传的文件


更新时间:2020-11-27 23:13:18

更新说明:新增autoUpload   用以判断时候自动上传还是点击某元素后再上传


更新时间:2020-11-17 20:49:43

更新说明:修改了fileTypes判断依据,  判断依据改为文件后缀名(之前是根据上传文件的type判断)


更新时间:2020-07-22 01:18:51

$(".fileupload").filesUpload({
    url: 'http://up.qiniu.com', //上传地址
    multiple: true, //是否多文件上传
    accept: '', //input accept属性
    fileTypes: 'png,webp,mp4', //文件格式
    buttonText: '选择文件', //按钮文字
    onUploadStart: function() {}, //请求开始
    onUploadSuccess: function() {}, //请求成功
    onUploadComplete: function() {}, //请求完成
    onUploadError: function(res, xhr) { //请求错误
        console.log(res, xhr)
    }
})
相关插件-上传

jQuery h5拖拽多文件上传

可用input控件选择文件,也可以拖拽文件,可以一次上传多个文件,测试需要后台配合,支持失败重传,支持过滤文件类型,文件大小,及同一文件重复上传。
  上传
 88920  528

jQuery多图上传插件imgUp.js

可以多图的上传,预览,并带删除功能
  上传
 126744  963

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

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

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

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

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

    ?? 0
    2021/5/17 11:04:00
    作者你好 选中多个文件上传时onUploadSuccess函数的执行会有问题 ,如果两个文件上传成功的间隔很短时,只会返回第一个文件上传成功的参数,如果间隔较长,每一个文件上传成功时都会返回所有文件的上传成功的参数, onUploadSuccess函数的执行有详细的规则说明吗,希望你能看到 谢谢
        时光 や最深处1
        2021/5/18 14:46:05
        循环文件创建请求 当 请求已完成,且响应已就绪就执行onUploadSuccess()
    回复
    ? 0
    2021/4/6 13:57:30
    作者你好,怎么可以上传成功后,删除上传的某一项 回复
    嗯、好傻 0
    2021/3/10 17:57:38
    可以传文件夹吗
        时光 や最深处0
        2021/3/11 10:14:30
        ......不可以
    回复
    ?边走边?爱反正人山人海 0
    2021/1/22 18:11:36
    你好 可以加下扣扣嘛想请教一下怎么传参数啊谢谢 一四四六九八零二一零
        时光 や最深处0
        2021/2/23 14:33:55
        直接改js里面上传的代码啊
    回复
    ?边走边?爱反正人山人海 0
    2021/1/22 17:08:01
    你好 请问怎么传参数呀 回复
    天使也掉毛 0
    2021/1/14 11:13:50
    参数怎么传,如果我放在请求url后面,在我打开页面修改参数后上传的时候参数还是没有变 回复
    曾经最掏心。 0
    2021/1/5 10:23:00
    这个可以上传pdf吗
        西瓜0
        2021/1/5 10:52:10

        当然可以自己修改后缀名判断即可

        fileTypes: 'png,webp,mp4', //文件格式

        注意前台判断了,后台也要判断哦!

    回复
    4 0
    2020/12/28 17:00:57
    如果要自己写ajax上传的话,可以不填url吗
        时光 や最深处0
        2021/1/6 17:51:54
        可以啊

    回复
    马云不疼马化腾 0
    2020/12/17 9:28:44
    作者你好,上传路径怎么修改
        时光 や最深处0
        2020/12/17 10:21:24
        $(".fileupload").filesUpload({
            url:'http://up.qiniu.com',//上传地址
        })
        马云不疼马化腾0
        2020/12/17 10:26:51
        我把路径改成我自己的之后就会报错
        时光 や最深处0
        2021/1/6 17:52:15
        看是啥错误啊
    回复
    西瓜 0
    2020/11/27 23:21:49
    需要改进下,选择完文件后应该显示下文件名,否则让用户以为无效果。
        时光 や最深处0
        2020/11/28 10:54:51
        新增fileChangeEnd(file) ;返回的选择的file
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复