jQuery图片上传预览支持拖拽

所属分类:输入-上传

 51901  356  查看评论 (149)
分享到微信朋友圈
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图片上传展示插件imgFileupload.js

jQuery图片上传展示,支持多图上传,限制图片上传个数
  上传
 90059  449

zyupload图片上传修改版

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

基于amazeui头像上传

基于amazeui框架,设计的头像上传插件
  上传
 62642  443

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

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

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

    飘零星 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格式,并显示出来
           }
        }
    回复
    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
    一个页面有多个 怎么办 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复