jQuery图片上传预览支持拖拽

所属分类:输入-上传

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

jQuery移动端多图上传(带裁剪功能)

适应于手机端上传图片的功能,附带上传图片裁剪功能
  上传
 30943  291

图片上传插件zyupload java版实例代码

本插件经本人多次修改完善,功能齐全,支持多图片上传、拖拽上传、剪辑、编辑,上传预览,编辑获取默认值等功能,并且每一个功能对应一个demo,简单易懂,方便学习修改
  上传
 106125  730

h5拖拽文件图片上传插件

支持拖拽上传,拖拽排序,图片压缩的简单上传插件
  上传
 54231  393

jquery头像上传剪裁插件cropper

cropper是一款使用简单且功能强大的图片剪裁jQuery插件
  上传
 100651  655

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

    飘零星 0
    2020/12/2 10:45:02
    一个页面有多个能用吗? 回复
    不知道人 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格式,并显示出来
           }
        }
    回复
    Joan 0
    2020/2/22 17:23:15
    请问我想加入删除该图片功能可以吗?
        areyouOk1
        2020/2/22 21:50:36
        当然可以,自己加个功能,修改src值即可。
    回复
    兴风作浪 0
    2020/1/13 18:09:07
    可以支持多张上传吗
        万迪0
        2020/4/10 11:11:40
        可以
    回复
    0
    2019/11/18 19:10:38
    一个页面有多个 怎么办 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复