**TP5+闃块噷浜慜SS涓婁紶鏂囦欢绗笁鑺?瀹炵幇娣樺疂涓婁紶鍟嗗搧鍥剧墖棣栧厛鎴戜滑鏉ョ湅鐪嬫窐瀹濈殑鍔熻兘鍜屾牱寮?**涔嬪悗鐪嬬湅鍒朵綔瀹屾垚鐨勬紨绀?(鐢变簬鍏ㄩ儴鍔熻兘寮勬垚GIF鏈夌偣澶?闄愬埗涓婁紶澶у皬濂藉儚鍦?M涔嬪唴,鍘嬬缉涔嬪悗涔熸湁1.9M,鎵€浠ュ垎涓轰袱涓紨绀哄浘鐗?;鍚庣浠ｇ爜鍩轰簬绗笁涓枃绔?涓嶅彉;鍘绘帀涓婁紶杩涘害鏉?鍘绘帀涓婁紶鎻愮ず!閲嶅啓webuploader.css 閲嶅啓uploader.js鍓嶇浠ｇ爜html:闇€瑕乯quesy.js webuploader.js鍓嶇浠ｇ爜html: <div class="items"> <div class="item"> <div class="upBtn"></div> <div class="inner"> <a href="javascript:;" class="icon left">蟀崈</a> <a href="javascript:;" class="icon right">蟀崉</a> <a href="javascript:;" class="icon delete">顧?lt;/a> </div> </div> <div class="item"> <div class="upBtn"></div> <div class="inner"> <a href="javascript:;" class="icon left">蟀崈</a> <a href="javascript:;" class="icon right">蟀崉</a> <a href="javascript:;" class="icon delete">顧?lt;/a> </div> </div> <div class="item"> <div class="upBtn"></div> <div class="inner"> <a href="javascript:;" class="icon left">蟀崈</a> <a href="javascript:;" class="icon right">蟀崉</a> <a href="javascript:;" class="icon delete">顧?lt;/a> </div> </div> <div class="item"> <div class="upBtn"></div> <div class="inner"> <a href="javascript:;" class="icon left">蟀崈</a> <a href="javascript:;" class="icon right">蟀崉</a> <a href="javascript:;" class="icon delete">顧?lt;/a> </div> </div> <div class="item"> <div class="upBtn"></div> <div class="inner"> <a href="javascript:;" class="icon left">蟀崈</a> <a href="javascript:;" class="icon right">蟀崉</a> <a href="javascript:;" class="icon delete">顧?lt;/a> </div> </div> <div class="item"> <div class="upBtn"></div> <div class="inner"> <a href="javascript:;" class="icon left">蟀崈</a> <a href="javascript:;" class="icon right">蟀崉</a> <a href="javascript:;" class="icon delete">顧?lt;/a> </div> </div> </div>鍓嶇浠ｇ爜鐨勫熀鏈牱寮?<style> div.items { float: right; width: 900px; margin-top: 100px; } div.item { border: 1px solid #333; width: 130px; height: 140px; float: left; margin-right: 10px; background: #CCC; border-radius: 3px; cursor: pointer; text-align: center; position: relative; } div.item .inner { position: absolute; bottom: 0; width: 100%; height: 23px; border-top: #ccc; background: #FFF; padding-top: 1px; display: none; } div.inner a { text-decoration: none; } div.inner a.left, div.inner a.right { color: #48B787; font-size: 14px; margin-right: 10px; margin-left: 10px } div.inner a.delete { color: #E4393c; /*font-weight: bold;*/ margin-left: 10px } div.item .thumbImg { width: 120px; height: 115px; margin: 3px; } div.item .thumbImg img { width: 100%; height: 100%; border-radius: 3px; } </style>淇敼鍚庣殑webuploader.css.webuploader-container { position: relative;}.webuploader-element-invisible { position: absolute !important; clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ clip: rect(1px,1px,1px,1px);}.webuploader-pick { position: relative; display: inline-block; cursor: pointer; width:100px; height: 100px; line-height: 35px; font-size: 14px; color: #fff; text-align: center; border-radius: 4px; overflow: hidden; margin: 15px; background: url("../img/up.png") no-repeat center; white-space: nowrap; vertical-align: middle;}.webuploader-pick-disable { opacity: 0.6; pointer-events:none;}upload.js/** * User: 鏉庢槉澶?* Date: 2018/5/20 * Time: 00:27 * Email: haotian0607@gmail.com */$(function () { //鍒涘缓uploader瀹炰緥 WebUploader.create({ server: uploaderUrl, //鏈嶅姟鍣ㄥ紓姝ユ帴鍙楀湴鍧€! duplicate: true, pick: { id: ".upBtn", multiple: false, //绂佹澶氶€? }, resize: false, //涓嶅帇缂﹊mage auto: true, //閫夋嫨涔嬪悗鑷姩涓婁紶 swf: '../flash/Uploader.swf', //闃叉浣庣増鏈祻瑙堝櫒 鐢ㄥ埌浜唂lash // 鍙厑璁搁€夋嫨鍥剧墖鏂囦欢銆? accept: { title: 'Images', extensions: 'gif,jpg,jpeg,bmp,png', mimeTypes: 'image/*' } }).on('fileQueued', function (file) { var uploaderId = '#rt_' + file.source.ruid; $item = $(uploaderId).parents('.item'); $item.find('.inner').show(); $item.find('.upBtn').hide(); var $li = $('<div id="' + file.id + '" class="thumbImg"><img></div>'), $img = $li.find('img'); $item.append($li); /** * 鍒涘缓棰勮鍥? * @type {number | undefined} */ $ImgId = $item.find($("input[name='imgId']")); if (!$ImgId.length) { $ImgId = $item.append('<input name="imgId" type="hidden">'); } /** * 棰勮鍥惧睘鎬? * @type {number} */ var thumbnailWidth = 100, thumbnailHeight = 100; this.makeThumb(file, function (error, src) { if (error) { $img.replaceWith('<span>涓嶈兘棰勮</span>'); return; } $img.attr('src', src); }, thumbnailWidth, thumbnailHeight); }).on('uploadSuccess', function (file, response) { var uploaderId = '#rt_' + file.source.ruid; var $item = $(uploaderId).parents('.item'); // $item.find('.upBtn').remove(); $item.find($("input[name='imgId']")).val(response.data.imgId); })});鎿嶄綔椤甸潰涓垹闄?宸﹀彸浜掓崲浣嶇疆鐨刯s<script> $(function () { $("body").on('click', '.delete', function () { $(this).parents('.item').find('.inner').hide().siblings('.upBtn').show().siblings('.thumbImg,input').remove(); }); var allIndex = $(".items .item").size() - 1; $("body").on('click', '.left', function () { var that = $(this), index = that.parents('.item').index(), currentObj = that.parents('.item'), currentObjHtml = currentObj.html(), preObj = that.parents('.items').find('.item').eq(index - 1), preObjHtml = preObj.html(); if (index <= 0 || index > allIndex) return; currentObj.html(preObjHtml); preObj.html(currentObjHtml); }); $("body").on('click', '.right', function () { var that = $(this), index = that.parents('.item').index(), currentObj = that.parents('.item'), currentObjHtml = currentObj.html(), nextObj = that.parents('.items').find('.item').eq(index + 1), nextObjHtml = nextObj.html(); if (index > allIndex) return; currentObj.html(nextObjHtml); nextObj.html(currentObjHtml); }); });</script>婕旂ず鍦板潃:http://www.yaojinbu.cn http://li-8.com鐢变簬涓婁紶鏂囦欢鍒伴樋閲屼簯鏈嶅姟鍣ㄩ渶瑕侀挶鐨?鎵€浠ュ悗绔繑鍥炵殑鏄亣鏁版嵁!浠ュ厤鏈変汉鎭舵剰涓婁紶!鏈変竴涓猙ug 鍦ㄧЩ鍔ㄤ箣鍚庡垹闄ゆ棤娉曢噸鏂颁笂浼?浠婃櫄鏃堕棿澶櫄浜?鏄庢櫄缁欎慨澶嶄簡!鍏充簬娉ㄩ噴,鏈鍐欎唬鐮佹病鏈夊啓澶缁嗙殑娉ㄩ噴,澶у鍑戝悎鐫€鐪嬫妸!
