jQuery图片上传预览支持拖拽

所属分类:输入-上传

 63557  418  查看评论 (156)
分享到微信朋友圈
X
jQuery图片上传预览支持拖拽 ie兼容9

使用方法

1.插件依赖jQuery,打开index.html即可使用

2.初始化id,提供回调函数,与后台交互

3.初始化

var dragImgUpload = new DragImgUpload("#_area",{
       callback:function (files) {
           //回调函数,可以传递给后台等等
           var file = files[0];
           console.log(file.name);
       }
})
相关插件-上传

图片预览上传插件bootstrap-fileinput.js

bootstrapfileinput预览上传图片并使用FmData上传,上传url根据实际情况填写
  上传
 84875  494

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

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

jQuery图片上传展示插件imgFileupload.js

jQuery图片上传展示,支持多图上传,限制图片上传个数
  上传
 110930  506

jQuery图片上传,带剪切功能

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

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

    Judy 0
    2024/2/24 15:31:59
    很不错,感谢! 回复
    小钻风 0
    2022/6/12 15:37:59
    如何调用upload.js里的方法啊,, 回复
    平平淡淡 0
    2021/12/6 10:28:22
    昆古尼尔 0
    2021/8/25 20:40:10
    楼主,前端div的内容怎么用post传到后端啊 回复
    飘零星 0
    2020/12/2 10:45:02
    一个页面有多个能用吗?
        横荣しずく0
        2021/3/23 16:07:07
        一个页面 用一个会比较好吧
    回复
    不知道人 0
    2020/11/26 11:45:36
    这个怎么设置只能调用摄像头拍照上传,不管安卓和IOS 回复
    故人北 0
    2020/9/10 9:47:47
    怎么限制一下上传类型啊
        西瓜1
        2020/9/10 11:09:35

        自己加个判断就行了
        uload.js第93行后加

        if (!/\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(filename)) {
            alert("图片类型必须是.gif,jpeg,jpg,png中的一种");
            ths.value = "";
            return false;
        }
        故人北0
        2020/9/10 11:18:44
        已解决 我直接加到这里了
        fileInput = document.createElement('input');
        fileInput.accept = 'image/jpeg, image/png';
    回复
    Coolmeow 0
    2020/8/28 8:59:10
    支持作者!!!!!!!! 回复
    xujianbo0308 0
    2020/8/3 15:50:00
    这个不支持拍照上传吗? 回复
    知足者常乐。 0
    2020/7/28 21:33:41
    好东西 多谢分享 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复