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

所属分类:输入-上传

 27372  154  查看评论 (108)
基于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>
相关插件-上传

基于amazeui头像上传

基于amazeui框架,设计的头像上传插件
  上传
 32914  169

jQuery多图上传带ajax提交

jQuery多图上传可删除,可以本地预览带前台接口
  上传
 35380  177

jquery多图片上传

多张图片上传,显示
  上传
 199964  430

js上传图片预览

js上传图片本地预览
  上传
 64946  211

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

    醉丶是心安 0
    2018/7/12 10:59:10
    看见好吃的走不动 0
    2018/7/10 15:26:58
    怎么设置预览图片大小? 回复
    夜空中最亮的星 0
    2018/7/1 13:45:41
    Sunshine 0
    2018/6/26 15:27:52
    这个插件怎么显示进度条哈?小白求指导
        夜空中最亮的星0
        2018/7/1 13:47:38
    回复
    浪漫情怀 0
    2018/6/19 16:22:29
    ?? 0
    2018/6/16 10:45:36
    上传后还可以删除吗
    回复
    阳光宅男 0
    2018/6/6 12:05:24
    请问上传到服务器后,加载页面的时候如何绑定数据库里面的数据呢
        照顾自己的智商0
        2018/6/12 12:29:48
        你是如何上传到服务器的
    回复
    秦王-设计冉祥雷 0
    2018/6/2 15:42:10
    我想请问一下这个上传如何获取选择的文件的本地地址 回复
    人人人_2o17 0
    2018/5/31 19:00:08
    じ☆v牵尔。右手 0
    2018/5/28 16:56:16
    可以优化下不能选取同一张图片。。
        缺心眼子0
        2018/7/2 15:29:44
        选了同一张后 会弹出提示
    回复
取消回复