伟德BETVICTOR_手机1946韦德最新网站_韦德1946手机版客户端【唯一授权官网】

所属分类:韦德1946手机版客户端-上传
伟德BETVICTOR_手机1946韦德最新网站_韦德1946手机版客户端【唯一授权官网】 ie兼容10

使用方法

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>
相关伟德BETVICTOR-上传

jQuery h5拖拽多文件上传

可用input控件选择文件,也可以拖拽文件,可以一次上传多个文件,测试需要后台配合,支持失败重传,支持过滤文件类型,文件大小,及同一文件重复上传。
  上传
 28221  134

js上传图片预览

js上传图片本地预览
  上传
 55574  201

webuploader 上传伟德BETVICTOR(根据官方做了小改)

webuploader上传伟德BETVICTOR,上图之前图片可编辑、可随意排版上传图片顺序
  上传
 23128  104

zyupload图片上传修改版

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

讨论这个项目(49)回答他人问题或分享伟德BETVICTOR使用方法奖励jQ币

    忆往 0
    2018/1/19 13:50:57
    为啥不能发起请求 回复
    杨卫安-龙族网络 0
    2018/1/19 10:36:03
    既然是基于webuploader 的伟德BETVICTOR,为什么不能自动上传,ajax请求还要自己写吗 回复
    ?点火? 0
    2018/1/18 14:11:17
    想要的是上传后,再编辑回显,不知道有没这个功能 回复
    ┵ Enzo. 0
    2018/1/15 16:13:13
    上传的应该是缩略图 回复
    技术―周建群 0
    2018/1/10 17:22:26
    0
    2018/1/5 14:56:39
    五月黑锾 0
    2018/1/5 10:15:55
    支持一下,,很厉害的样子 回复
    smtljack 0
    2018/1/4 11:54:10
    在线演示看起来挺不错 回复
    秋塘寒鸦 0
    2017/12/31 19:16:27
    点击左右移动 调整超过三次 按钮就不管用了 回复
    Ls 0
    2017/12/30 16:39:06
取消回复