webuploader+ssm實現圖片上傳
阿新 • • 發佈:2018-11-20
工具:
1、ssm(maven方式)
2、webuploader(webuploader.js,weblocder.css,Uploader.swf,images)
webuploader官網地址:http://fex.baidu.com/webuploader/
客戶端主要程式碼:(程式碼主要來自webuploader官網demo)
HTML部分:
<form> <div id="uploader" class="wu-example"> <div class="queueList"> <div id="dndArea" class="placeholder"> <div id="filePicker"></div> <p>或將照片拖到這裡,單次最多可選300張</p> </div> </div> <div class="statusBar" style="display: none;"> <div class="progress"> <span class="text">0%</span> <span class="percentage"></span> </div> <div class="info"></div> <div class="btns"> <div id="filePicker2"></div> <div class="uploadBtn">開始上傳</div> </div> </div> </div> </form>
js部分:
jQuery(function() { var $ = jQuery, // just in case. Make sure it's not an other libaray. $wrap = $('#uploader'), // 圖片容器 $queue = $('<ul class="filelist"></ul>').appendTo($wrap.find('.queueList')), // 狀態列,包括進度和控制按鈕 $statusBar = $wrap.find('.statusBar'), // 檔案總體選擇資訊。 $info = $statusBar.find('.info'), // 上傳按鈕 $upload = $wrap.find('.uploadBtn'), // 沒選擇檔案之前的內容。 $placeHolder = $wrap.find('.placeholder'), // 總體進度條 $progress = $statusBar.find('.progress').hide(), // 新增的檔案數量 fileCount = 0, // 新增的檔案總大小 fileSize = 0, // 優化retina, 在retina下這個值是2 ratio = window.devicePixelRatio || 1, // 縮圖大小 thumbnailWidth = 110 * ratio, thumbnailHeight = 110 * ratio, // 可能有pedding, ready, uploading, confirm, done. state = 'pedding', // 所有檔案的進度資訊,key為file id percentages = {}, supportTransition = (function() { var s = document.createElement('p').style, r = 'transition' in s || 'WebkitTransition' in s || 'MozTransition' in s || 'msTransition' in s || 'OTransition' in s; s = null; return r; })(), // WebUploader例項 uploader; // 檢測瀏覽器是否支援webuploader if (!WebUploader.Uploader.support()) { alert('Web Uploader 不支援您的瀏覽器!如果你使用的是IE瀏覽器,請嘗試升級 flash 播放器'); throw new Error( 'WebUploader does not support the browser you are using.'); } // 例項化 uploader = WebUploader.create({ // 選完檔案後,是否自動上傳 auto : false, // swf檔案路徑,flash上傳時使用 swf : "../../lib/webUploader/0.1.5/Uploader.swf", // 檔案接收服務端路徑 server : "", // 選擇檔案的按鈕 pick : { id : '#filePicker', innerHTML : '點選選擇圖片' }, // 指定接收哪些型別的檔案 accept : { title : "images", // 文字描述 extensions : "jpg,jpeg,bmp,png", mimeTypes : "image/jpg,image/x-ms-bmp,image/png" }, // 配置生成縮圖的選項 thumb : { width : 110, height : 110, // 是否允許放大 allowmagnify : false, // 是否允許裁剪 crop : true }, // 配置壓縮圖片的選項,如果此項為false,則上傳前不壓縮 compress : false, // 限制檔案總數量,超出則不允許加入佇列 fileNumLimit : "5", // 限制單個檔案大小 fileSingleSizeLimit : 50 * 1024, // 50KB // 去重 duplicate : true, // 禁掉全域性的拖拽功能。這樣不會出現圖片拖進頁面的時候,把圖片開啟。 disableGlobalDnd : true, dnd : "#dndArea" }); // 新增“新增檔案”的按鈕, uploader.addButton({ id : '#filePicker2', label : '繼續新增' }); // 當有檔案新增進來時執行,負責view的建立 function addFile(file) { var $li = $('<li id="' + file.id + '">' + '<p class="title">' + file.name + '</p>' + '<p class="imgWrap"></p>' + '<p class="progress"><span></span></p>' + '</li>'), $btns = $( '<div class="file-panel">' + '<span class="cancel">刪除</span>' + '<span class="rotateRight">向右旋轉</span>' + '<span class="rotateLeft">向左旋轉</span></div>') .appendTo($li), $prgress = $li.find('p.progress span'), $wrap = $li .find('p.imgWrap'), $info = $('<p class="error"></p>'), showError = function(code) { switch (code) { case 'exceed_size': text = '檔案大小超出'; break; case 'interrupt': text = '上傳暫停'; break; default: text = '上傳失敗,請重試'; break; } $info.text(text).appendTo($li); }; if (file.getStatus() === 'invalid') { showError(file.statusText); } else { // @todo lazyload $wrap.text('預覽中'); uploader.makeThumb(file, function(error, src) { if (error) { $wrap.text('不能預覽'); return; } var img = $('<img src="' + src + '">'); $wrap.empty().append(img); }, thumbnailWidth, thumbnailHeight); percentages[file.id] = [ file.size, 0 ]; file.rotation = 0; } file.on('statuschange', function(cur, prev) { if (prev === 'progress') { $prgress.hide().width(0); } else if (prev === 'queued') { $li.off('mouseenter mouseleave'); $btns.remove(); } // 成功 if (cur === 'error' || cur === 'invalid') { console.log(file.statusText); showError(file.statusText); percentages[file.id][1] = 1; } else if (cur === 'interrupt') { showError('interrupt'); } else if (cur === 'queued') { percentages[file.id][1] = 0; } else if (cur === 'progress') { $info.remove(); $prgress.css('display', 'block'); } else if (cur === 'complete') { $li.append('<span class="success"></span>'); } $li.removeClass('state-' + prev).addClass('state-' + cur); }); $li.on('mouseenter', function() { $btns.stop().animate({ height : 30 }); }); $li.on('mouseleave', function() { $btns.stop().animate({ height : 0 }); }); $btns .on( 'click', 'span', function() { var index = $(this).index(), deg; switch (index) { case 0: uploader.removeFile(file); return; case 1: file.rotation += 90; break; case 2: file.rotation -= 90; break; } if (supportTransition) { deg = 'rotate(' + file.rotation + 'deg)'; $wrap.css({ '-webkit-transform' : deg, '-mos-transform' : deg, '-o-transform' : deg, 'transform' : deg }); } else { $wrap .css( 'filter', 'progid:DXImageTransform.Microsoft.BasicImage(rotation=' + (~~((file.rotation / 90) % 4 + 4) % 4) + ')'); } }); $li.appendTo($queue); } // 負責view的銷燬 function removeFile(file) { var $li = $('#' + file.id); delete percentages[file.id]; updateTotalProgress(); $li.off().find('.file-panel').off().end().remove(); } function updateTotalProgress() { var loaded = 0, total = 0, spans = $progress.children(), percent; $.each(percentages, function(k, v) { total += v[0]; loaded += v[0] * v[1]; }); percent = total ? loaded / total : 0; spans.eq(0).text(Math.round(percent * 100) + '%'); spans.eq(1).css('width', Math.round(percent * 100) + '%'); updateStatus(); } function updateStatus() { var text = '', stats; if (state === 'ready') { text = '選中' + fileCount + '張圖片,共' + WebUploader.formatSize(fileSize) + '。'; } else if (state === 'confirm') { stats = uploader.getStats(); if (stats.uploadFailNum) { text = '已成功上傳' + stats.successNum + '張照片至XX相簿,' + stats.uploadFailNum + '張照片上傳失敗,<a class="retry" href="#">重新上傳</a>失敗圖片或<a class="ignore" href="#">忽略</a>' } } else { stats = uploader.getStats(); text = '共' + fileCount + '張(' + WebUploader.formatSize(fileSize) + '),已上傳' + stats.successNum + '張'; if (stats.uploadFailNum) { text += ',失敗' + stats.uploadFailNum + '張'; } } $info.html(text); } function setState(val) { var file, stats; if (val === state) { return; } $upload.removeClass('state-' + state); $upload.addClass('state-' + val); state = val; switch (state) { case 'pedding': $placeHolder.removeClass('element-invisible'); $queue.parent().removeClass('filled'); $queue.hide(); $statusBar.addClass('element-invisible'); uploader.refresh(); break; case 'ready': $placeHolder.addClass('element-invisible'); $('#filePicker2').removeClass('element-invisible'); $queue.parent().addClass('filled'); $queue.show(); $statusBar.removeClass('element-invisible'); uploader.refresh(); break; case 'uploading': $('#filePicker2').addClass('element-invisible'); $progress.show(); $upload.text('暫停上傳'); break; case 'paused': $progress.show(); $upload.text('繼續上傳'); break; case 'confirm': $progress.hide(); $upload.text('開始上傳').addClass('disabled'); stats = uploader.getStats(); if (stats.successNum && !stats.uploadFailNum) { setState('finish'); return; } break; case 'finish': stats = uploader.getStats(); if (stats.successNum) { alert('上傳成功'); } else { // 沒有成功的圖片,重設 state = 'done'; location.reload(); } break; } updateStatus(); } uploader.onUploadProgress = function(file, percentage) { var $li = $('#' + file.id), $percent = $li.find('.progress span'); $percent.css('width', percentage * 100 + '%'); percentages[file.id][1] = percentage; updateTotalProgress(); }; uploader.onFileQueued = function(file) { fileCount++; fileSize += file.size; if (fileCount === 1) { $placeHolder.addClass('element-invisible'); $statusBar.show(); } addFile(file); setState('ready'); updateTotalProgress(); }; uploader.onFileDequeued = function(file) { fileCount--; fileSize -= file.size; if (!fileCount) { setState('pedding'); } removeFile(file); updateTotalProgress(); }; uploader.on('all', function(type) { var stats; switch (type) { case 'uploadFinished': setState('confirm'); break; case 'startUpload': setState('uploading'); break; case 'stopUpload': setState('paused'); break; } }); uploader.onError = function(code) { alert('Eroor: ' + code); }; $upload.on('click', function() { if ($(this).hasClass('disabled')) { return false; } if (state === 'ready') { uploader.upload(); } else if (state === 'paused') { uploader.upload(); } else if (state === 'uploading') { uploader.stop(); } }); $info.on('click', '.retry', function() { uploader.retry(); }); $info.on('click', '.ignore', function() { alert('todo'); }); $upload.addClass('state-' + state); updateTotalProgress(); });
注:
1、mimeType最好寫全,如果簡寫成“image/*”,會出現頁面點選無反應,過半天才彈窗。附上一個mimeType錶鏈接:https://blog.csdn.net/qq_19916577/article/details/46502761
2、限制單張圖片檔案的大小,單位是B。
3、此份程式碼有個bug,點選選擇圖片不居中顯示,某位大神如果解決了麻煩告知一下。
css部分:
#container { color: #838383; font-size: 12px; } #uploader .queueList { margin: 20px; border: 3px dashed #e6e6e6; } #uploader .queueList.filled { padding: 17px; margin: 0; border: 3px dashed transparent; } #uploader .queueList.webuploader-dnd-over { border: 3px dashed #999999; } #uploader p {margin: 0;} .element-invisible { position: absolute !important; clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ clip: rect(1px,1px,1px,1px); } #uploader .placeholder { min-height: 350px; padding-top: 178px; text-align: center; background: url(../images/image.png) center 93px no-repeat; color: #cccccc; font-size: 18px; position: relative; } #uploader .placeholder .webuploader-pick { font-size: 18px; background: #00b7ee; border-radius: 3px; line-height: 44px; padding: 0 30px; *width: 120px; color: #fff; display: inline-block; margin: 0 auto 20px auto; cursor: pointer; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); } #uploader .placeholder .webuploader-pick-hover { background: #00a2d4; } #uploader .placeholder .flashTip { color: #666666; font-size: 12px; position: absolute; width: 100%; text-align: center; bottom: 20px; } #uploader .placeholder .flashTip a { color: #0785d1; text-decoration: none; } #uploader .placeholder .flashTip a:hover { text-decoration: underline; } #uploader .filelist { list-style: none; margin: 0; padding: 0; } #uploader .filelist:after { content: ''; display: block; width: 0; height: 0; overflow: hidden; clear: both; } #uploader .filelist li { width: 110px; height: 110px; background: url(../images/bg.png) no-repeat; text-align: center; margin: 0 8px 20px 0; position: relative; display: inline; float: left; overflow: hidden; font-size: 12px; } #uploader .filelist li p.log { position: relative; top: -45px; } #uploader .filelist li p.title { position: absolute; top: 0; left: 0; width: 100%; overflow: hidden; white-space: nowrap; text-overflow : ellipsis; top: 5px; text-indent: 5px; text-align: left; } #uploader .filelist li p.progress { position: absolute; width: 100%; bottom: 0; left: 0; height: 8px; overflow: hidden; z-index: 50; margin: 0; border-radius: 0; background: none; -webkit-box-shadow: 0 0 0; } #uploader .filelist li p.progress span { display: none; overflow: hidden; width: 0; height: 100%; background: #1483d8 url(../images/progress.png) repeat-x; -webit-transition: width 200ms linear; -moz-transition: width 200ms linear; -o-transition: width 200ms linear; -ms-transition: width 200ms linear; transition: width 200ms linear; -webkit-animation: progressmove 2s linear infinite; -moz-animation: progressmove 2s linear infinite; -o-animation: progressmove 2s linear infinite; -ms-animation: progressmove 2s linear infinite; animation: progressmove 2s linear infinite; -webkit-transform: translateZ(0); } @-webkit-keyframes progressmove { 0% { background-position: 0 0; } 100% { background-position: 17px 0; } } @-moz-keyframes progressmove { 0% { background-position: 0 0; } 100% { background-position: 17px 0; } } @keyframes progressmove { 0% { background-position: 0 0; } 100% { background-position: 17px 0; } } #uploader .filelist li p.imgWrap { position: relative; z-index: 2; line-height: 110px; vertical-align: middle; overflow: hidden; width: 110px; height: 110px; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; transform-origin: 50% 50%; -webit-transition: 200ms ease-out; -moz-transition: 200ms ease-out; -o-transition: 200ms ease-out; -ms-transition: 200ms ease-out; transition: 200ms ease-out; } #uploader .filelist li img { width: 100%; } #uploader .filelist li p.error { background: #f43838; color: #fff; position: absolute; bottom: 0; left: 0; height: 28px; line-height: 28px; width: 100%; z-index: 100; } #uploader .filelist li .success { display: block; position: absolute; left: 0; bottom: 0; height: 40px; width: 100%; z-index: 200; background: url(../images/success.png) no-repeat right bottom; } #uploader .filelist div.file-panel { position: absolute; height: 0; filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#80000000', endColorstr='#80000000')\0; background: rgba( 0, 0, 0, 0.5 ); width: 100%; top: 0; left: 0; overflow: hidden; z-index: 300; } #uploader .filelist div.file-panel span { width: 24px; height: 24px; display: inline; float: right; text-indent: -9999px; overflow: hidden; background: url(../images/icons.png) no-repeat; margin: 5px 1px 1px; cursor: pointer; } #uploader .filelist div.file-panel span.rotateLeft { background-position: 0 -24px; } #uploader .filelist div.file-panel span.rotateLeft:hover { background-position: 0 0; } #uploader .filelist div.file-panel span.rotateRight { background-position: -24px -24px; } #uploader .filelist div.file-panel span.rotateRight:hover { background-position: -24px 0; } #uploader .filelist div.file-panel span.cancel { background-position: -48px -24px; } #uploader .filelist div.file-panel span.cancel:hover { background-position: -48px 0; } #uploader .statusBar { height: 63px; border-top: 1px solid #dadada; padding: 0 20px; line-height: 63px; vertical-align: middle; position: relative; } #uploader .statusBar .progress { border: 1px solid #1483d8; width: 198px; background: #fff; height: 18px; position: relative; display: inline-block; text-align: center; line-height: 20px; color: #6dbfff; position: relative; margin: 0 10px 0 0; } #uploader .statusBar .progress span.percentage { width: 0; height: 100%; left: 0; top: 0; background: #1483d8; position: absolute; } #uploader .statusBar .progress span.text { position: relative; z-index: 10; } #uploader .statusBar .info { display: inline-block; font-size: 14px; color: #666666; } #uploader .statusBar .btns { position: absolute; top: 10px; right: 20px; line-height: 40px; } #filePicker2 { display: inline-block; float: left; } #uploader .statusBar .btns .webuploader-pick, #uploader .statusBar .btns .uploadBtn, #uploader .statusBar .btns .uploadBtn.state-uploading, #uploader .statusBar .btns .uploadBtn.state-paused { background: #ffffff; border: 1px solid #cfcfcf; color: #565656; padding: 0 18px; display: inline-block; border-radius: 3px; margin-left: 10px; cursor: pointer; font-size: 14px; float: left; } #uploader .statusBar .btns .webuploader-pick-hover, #uploader .statusBar .btns .uploadBtn:hover, #uploader .statusBar .btns .uploadBtn.state-uploading:hover, #uploader .statusBar .btns .uploadBtn.state-paused:hover { background: #f0f0f0; } #uploader .statusBar .btns .uploadBtn { background: #00b7ee; color: #fff; border-color: transparent; } #uploader .statusBar .btns .uploadBtn:hover { background: #00a2d4; } #uploader .statusBar .btns .uploadBtn.disabled { pointer-events: none; opacity: 0.6; }