jQuery图片上传预览支持拖拽

所属分类:输入-上传

 62835  416  查看评论 (152)
分享到微信朋友圈
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);
       }
})
相关插件-上传

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

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

webuploader 上传插件(根据官方做了小改)

webuploader上传插件,上图之前图片可编辑、可随意排版上传图片顺序
  上传
 67499  473

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

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

上传图片-可裁剪

上传图片可裁剪
  上传
 116539  388

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

    小钻风 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
    好东西 多谢分享 回复
    暮凉同学 0
    2020/3/11 0:09:17
    想知道怎么获取上传图片的base64
        琥珀0
        2020/3/19 14:43:32
        同问
        村头阿毛1
        2020/5/6 17:03:54
        <input type='file' id='fileEl'/>
        
        function base64() {
           let fileObj = document.getElementById('fileEl').files[0]  //获取文件对象
           let reader = new FileReader()   //新建一个FileReader对象
           reader.readAsDataURL(fileObj)   //将读取的文件转换成base64格式
           reader.onload = function(e) {
               document.getElementById('img').src = e.target.result    //将img标签的src换成base64格式,并显示出来
           }
        }
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复