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

所属分类:输入-上传

 18079  109  查看评论 (85)
基于webuploader多图片上传插件diyUpload.js ie兼容10

更新时间:2018/3/21 上午11:04:31

更新说明:
1,修改图片左右多次移动失效问题,更改过后图片可以一直进行左右切换
2,新增上传按钮:当前案例为纯前端案例,没有做任何请求
3,在diyUpload.js文件里面,有参数详解,例如限制上传图片的数量


使用方法

html代码:

<ul class="upload-ul clearfix">
    <li class="upload-pick">
        <div class="webuploader-container clearfix" id="goodsUpload"></div>
    </li>
</ul>

css:

/*上传图片通用样式*/
.upload-ul{ position: relative;  display: inline-block; *display: inline; *zoom:1; max-width: 520px; }
.upload-ul li{ position: relative; float: left; display: inline-block; width: 120px; height: 90px; margin: 0 10px 10px 0; padding: 0; border: none; cursor: pointer; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; overflow: hidden; }
.upload-pick{ background: url(../images/upload-bj.png) no-repeat 0 0; }
.upload-pick:hover{ background: url(../images/upload-bj.png) no-repeat 0 -90px; }
.webuploader-pick{position: relative;display: inline-block;vertical-align: top; width: 100%; height: 100%;}
.webuploader-container{ position: relative; width: 100%; height: 100%; }
.webuploader-container label{position: absolute;left: 0;top: 0;width: 100%;}
.webuploader-element-invisible{opacity: 0;width: 100%;height: 100%;clip: rect(1px 1px 1px 1px);clip: rect(1px,1px,1px,1px);}
.viewThumb{ position:relative;width: 100%;height: 100%;overflow:hidden;border-radius: .3rem;}
.viewThumb img{ width: 100%;height: 100%}
.diyBar{ position: absolute; display:none; top: 0;left: 0;width: 100%;height: 100%;background: url(../images/bgblack.png);z-index: 3;}
.diyProgress{ position: absolute; left: 0;top: 33px;width: 100%;height: 24px;line-height:24px;font-size: 14px;text-align: center;color: #FFF;background:rgba(10,168,241,.7); z-index: 3;}
.diyControl{ position: absolute; display:none; left: 0;bottom: 0;width: 100%;height: 24px;line-height:24px;font-size: 14px;background: url(../images/bgblack.png); z-index: 3; }
.viewThumb:hover .diyControl{ display: block; }
.diyControl span{ display: inline-block; padding: 6.5px 13px; width: 12px; height: 11px; }
.diyControl span i{ display: block; width: 12px; height: 11px; opacity: .7; }
.diyControl span i:hover{ opacity: 1; cursor: pointer; }
.diyLeft{ margin-left: 3px; }
.diyLeft{ margin-right: 3px; }
.diyLeft i{ margin-left: 3px; background: url(../images/upload-icon1.png) no-repeat 0 0; }
.diyCancel i{ background: url(../images/upload-icon1.png) no-repeat 0 -11px; }
.diyRight i{ margin-right: 3px; background: url(../images/upload-icon1.png) no-repeat 0 -22px; }
.goods-edit .upload-tip{ font: 12px/23px "Microsoft YaHei"; color: #a3a3a3;vertical-align: top; }

这里面包含了图片删除、左移位置、右移位置、长传进度的样式

js代码

//上传图片
var $tgaUpload1 = $('#goodsUpload1').diyUpload({
    url: '/uploadFilePath',
    success: function(data) {},
    error: function(err) {},
    buttonText: '',
    accept: {
        title: "Images",
        extensions: 'gif,jpg,jpeg,bmp,png'
    },
    thumb: {
        width: 120,
        height: 90,
        quality: 100,
        allowMagnify: true,
        crop: true,
        type: "image/jpeg"
    }
});

另外再引用js:

其中diyUpload.js里面的代码可以自己修改

<script src="js/webuploader.min.js"></script>
<script src="js/diyUpload.js"></script>
相关插件-上传

js上传图片预览

js上传图片本地预览
  上传
 60199  204

jQuery仿淘宝管理商品批量图片上传插件

jQuery淘宝上传商品图片代码,批量上传插件,(不兼容IE6,7,8)
  上传
 23678  68

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

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

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

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

讨论这个项目(85)回答他人问题或分享插件使用方法奖励jQ币

    分分钟@ 0
    2018/4/20 0:26:08
    java后台怎么接收呢 回复
    人间正道是沧桑 0
    2018/4/19 17:49:55
    谁有代码 发我一个 我没积分1971554899@qq.com 回复
    李志超900908 0
    2018/3/19 13:58:50
    这个怎么样可以限制一下只能上传三张图片呀
        缺心眼子0
        2018/3/19 14:10:40
        代码里面有数量限制的,你可以自己定义
    回复
    缺心眼子 0
    2018/3/13 14:38:21
    抱歉 这个代码有很多问题,我最近太忙了,没有时间更新,需要的朋友可以加我微信,我打包发给你们
        缺心眼子0
        2018/3/13 14:42:16
        我的微信是794739301
        缺心眼子0
        2018/3/13 14:43:45
        不知道怎么取消收取那个jQ币收费,之前下载过的朋友们对不起了,浪费你们的金币了
        咸鱼0
        2018/4/4 14:56:59
        121575762,求一份
        大药瓶子0
        2018/4/10 8:41:18
        求一份代码~~谢谢微信号K243248305
    回复
    为你撑伞 0
    2018/3/13 14:05:15
    这个左右移动的还是有问题,大佬能不能加上图片拖拽移动位置的啊
        缺心眼子0
        2018/3/13 14:39:18
        抱歉,我就是个初级程序员,拖拽啥的,我也不会啊
    回复
    倪好彩云 0
    2018/3/5 21:10:44
    请问下,这个在后台,图片数据是怎么接收的
        缺心眼子0
        2018/3/13 14:40:52
        我也不知道啊,我们后端人员直接甩给我接口,我组成数组就直接就甩给他们了啊,他们做了处理给我返回图片地址,我就可以回写了
    回复
    枫叶 0
    2018/3/3 17:40:23
    请问上传的图片怎么自适应宽和高呢?不要固定的宽高
        缺心眼子0
        2018/3/13 14:45:22
        抱歉,我也不会啊
    回复
    grin、sun 0
    2018/3/2 9:54:05
    想问下,自己加了点击小图显示大图后,显示的是缩略图,启用了compress:false,还是base64,导致点击小图显示出来的大图很模糊,还有删除都是调用的哪个方法?想把删除按钮加在点击显示出来的大图上,但是找不到点击的图片。
        缺心眼子0
        2018/3/13 14:47:02
        你真的很有想法,加油,整出来后可以跟大家分享分享
        grin、sun0
        2018/3/17 17:29:50
        找到那个原因了.是调用了百度上传组件官方的上传缩略图方法,所以会上传缩略图,显示的缩略图像素设置高一点就清晰了.但是目前我用这个删除时候老出问题,自己写了删除方法,又拿不到后台返回给我的辨认哪张图片的参数,目前卡在那里....
    回复
    277291404 0
    2018/2/28 15:33:36
    qq454501511 0
    2018/2/26 11:06:11
    厉害的一波,简洁大方,挺好用。另外请问图片左右移动的问题修复了没?
        qq4545015110
        2018/2/26 11:08:40
        还建议作者添加 鼠标指向图片后浮动显示图片名 功能
        cav0
        2018/2/27 11:13:15
        能发一份给我吗?1239091409@qq.com,谢谢
    回复
取消回复