生活随笔
收集整理的這篇文章主要介紹了
webupload 上传插件 完美版 - 拿走直接用
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
由于最近，我們產品web端口 ，涉及批量圖片上傳（你懂得， 商品嘛，都玩吐了），然后自己寫了一個半成品，后來
各種體驗問題，然后一想那么不是傻么？ 這么多上傳插件。
然后，那就爛大街的 ?webupload 唄，雖說我是 百度黑，不過百度確實有那么幾個良心插件還是不錯的 。
現在入正題，由于?webupload ? 功能強大，配置繁多，不過相對還是很好應用，不過遇到的問題也不少，供大家參考?
，最好只支持IE8以上，不然自己找虐，別找我額！
直接上效果 上代碼吧，里面也都有注釋，你們自己理解下載就行了，只需要配合 api 和我的代碼 改相應的 css 和上傳地址 就可以無縫對接
HTML：?
<div id="uploader-demo" class="controls"> <div class="uploader-list fileList"> </div> <div class="filePicker">添加商品圖冊 <br>最多 5 張 </div> </div>
--------------------------------------------------------------------------------------------------------------------------------------------------------------------
css：
.webuploader-container { position: relative; float: left;}.webuploader-element-invisible { position: absolute !important; clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ clip: rect(1px, 1px, 1px, 1px);}.webuploader-pick { display: inline-block; cursor: pointer; background: #fafafa; padding: 10px 15px; color: #666; text-align: center; border-radius: 3px; overflow: hidden; float: left; width: 128px; height: 88px; position: relative; border: 1px solid #d6dee3; overflow: hidden; padding-top: 60px;}.webuploader-pick-hover { background: #00A3C6; color: #fff;}.webuploader-pick-disable { opacity: 0.6; pointer-events: none;}/*demo樣式*/#picker { display: inline-block; line-height: 1.428571429; vertical-align: middle; margin: 0 12px 0 0;}#picker .webuploader-pick { padding: 6px 12px; display: block;}#uploader-demo .thumbnail { width: 150px; height: 150px; overflow: hidden;}#uploader-demo .thumbnail img { width: 100%;}.uploader-list { /*width: 100%;*/ overflow: hidden; float: left;}.file-item { float: left; position: relative; margin: 0 20px 20px 0; padding: 5px;}.file-item .error { position: absolute; top: 4px; left: 4px; right: 4px; background: red; color: white; text-align: center; height: 20px; font-size: 14px; line-height: 23px;}.file-item .info { position: absolute; left: 4px; bottom: 4px; right: 4px; height: 20px; line-height: 20px; text-indent: 5px; background: rgba(0, 0, 0, 0.6); color: white; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; z-index: 10;}/* 上次成功*/.upload-state-done:after { content: "\f00c"; font-family: FontAwesome; font-style: normal; font-weight: normal; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 32px; position: absolute; bottom: 0; right: 4px; color: #4cae4c; z-index: 99;}/*進度條*/.file-item .progress { position: absolute; right: 4px; bottom: 4px; height: 3px; left: 4px; height: 4px; overflow: hidden; z-index: 15; margin: 0; padding: 0; border-radius: 0; background: transparent;}/*進度條*/.file-item .progress span { display: block; overflow: hidden; width: 0; height: 100%; background: #d14 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);}/*取消 刪除*/.file-item 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.6); width: 100%; bottom: 0; left: 0; overflow: hidden; z-index: 300; color: #fff; line-height: 30px; text-align: right;}.file-item 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;}.file-item div.file-panel span.rotateLeft { background-position: 0 -24px;}.file-item div.file-panel span.rotateLeft:hover { background-position: 0 0;}.file-item div.file-panel span.rotateRight { background-position: -24px -24px;}.file-item div.file-panel span.rotateRight:hover { background-position: -24px 0;}.file-item div.file-panel span.cancel { background-position: -48px -24px;}.file-item div.file-panel span.cancel:hover { background-position: -48px 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; }}a.travis { position: relative; top: -4px; right: 15px;}
-----------------------------------------
-----------------------------------------
-----------------------------------------
-----------------------------------------
JS（重要部分，自己看 百度api 和注釋）
// 圖片webupload 上傳$(function() { var $ = jQuery, $list = $('.fileList'), $filePicker = $('.filePicker'), // 上傳按鈕 $upimgmax = 5, // 支持上傳最大個數 // 優化retina, 在retina下這個值是2 ratio = window.devicePixelRatio || 1, // 縮略圖大小 thumbnailWidth = 100 * ratio, thumbnailHeight = 100 * ratio, // 初始化Web Uploader uploader = WebUploader.create({ // 自動上傳。 auto: true, // swf文件路徑 swf: 'webuploader/Uploader.swf', // 文件接收服務端。 server: 你的后臺圖片上傳接受地址 也就是uploadurl, // 這里是圖片上傳地址 // 選擇文件的按鈕。可選。 // 內部根據當前運行是創建，可能是input元素，也可能是flash pick: { id: $filePicker, // multiple: false }, duplicate: true, fileSingleSizeLimit: 5242880, // 單個文件大小 fileNumLimit: $upimgmax, // 限制上傳個數 accept: { title: 'Images', extensions: 'jpg,jpeg,png', mimeTypes: 'image/jpg,image/jpeg,image/png' //修改這行 }, thumb: { width: 110, height: 110, // 圖片質量，只有type為`image/jpeg`的時候才有效。 quality: 70, // 是否允許放大，如果想要生成小圖的時候不失真，此選項應該設置為false. allowMagnify: true, // 是否允許裁剪。 crop: true, // 為空的話則保留原有圖片格式。 // 否則強制轉換成指定的類型。 type: 'image/jpeg' } }); // 當有文件添加進來的時候 uploader.on('fileQueued', function(file) { var $li = $( '<div id="' + file.id + '" class="file-item thumbnail">' + '<img>' + // '<div class="info">' + file.name + '</div>' + '<div class = "file-panel" style = "height: 30px;" > 刪除 ' + '<span class = "cancel delimgbtns" title="刪除"></span></div>' + '</div>' ), $img = $li.find('img'); $list.append($li); removefiles(file); // 文件刪除 // 創建縮略圖 uploader.makeThumb(file, function(error, src) { if (error) { $img.replaceWith('<span>不能預覽</span>'); return; } $img.attr('src', src); }, thumbnailWidth, thumbnailHeight); var uploadfilesNum = uploader.getStats().queueNum; // 共選中幾個圖片 // 最多支持 5張 if ($('.file-item').length >= $upimgmax) { $filePicker.hide(); if ($('.file-item').length >= ($upimgmax + 1)) { // 中斷 取消 大于 5張圖片的對象 uploader.removeFile(file, true); $('.file-item').last().remove(); } } else { $filePicker.show(); } }); // 文件上傳過程中創建進度條實時顯示。 uploader.on('uploadProgress', function(file, percentage) { var $li = $('#' + file.id), $percent = $li.find('.progress span'); // 避免重復創建 if (!$percent.length) { $percent = $('<p class="progress"><span></span></p>').appendTo($li).find('span'); } $percent.css('width', percentage * 100 + '%'); }); // 文件上傳成功，給item添加成功class, 用樣式標記上傳成功。 uploader.on('uploadSuccess', function(file, response) { var $li = $('#' + file.id), $img = $li.find('img'), $fileUrl = response.data[0].url, // 圖片上傳地址 $filename = file.name, // 上傳文件名稱 $filesize = (file.size / 1024).toFixed(2); // 上傳文件尺寸大小 保留2位 $li.addClass('upload-state-done'); // console.log(file); console.log(response); console.log('圖片地址:' + $fileUrl); $img.attr('src', $fileUrl); removefiles(file); // 刪除文件 removehttpfiles(); // 傳值賦值 // 商品詳細圖片 位置 // 這里自己賦值 傳值 });
// 文件上傳失敗，顯示上傳出錯。 uploader.on('uploadError', function(file) { var $li = $('#' + file.id), $error = $li.find('div.error'); // 避免重復創建 if (!$error.length) { $error = $('<div class="error"></div>').appendTo($li); } $error.text('上傳失敗'); }); // 完成上傳完了，成功或者失敗，先刪除進度條。 uploader.on('uploadComplete', function(file) { $('#' + file.id).find('.progress').remove(); console.log(file); // 獲取文件統計信息。返回一個包含一下信息的對象。 /*successNum 上傳成功的文件數 progressNum 上傳中的文件數 cancelNum 被刪除的文件數 invalidNum 無效的文件數 uploadFailNum 上傳失敗的文件數 queueNum 還在隊列中的文件數 interruptNum 被暫停的文件數 */ // console.log(uploader.getStats().uploadFailNum); }); uploader.on('error', function(handler) { if (handler == "Q_EXCEED_NUM_LIMIT") { layer.msg("最多只能上傳 " + $upimgmax + "張圖片"); } }); // 刪除按鈕事件 function removefiles(file) { // 刪除本條數據 // $('.delimgbtns').each(function(index, el) { $('.delimgbtns').click(function() { // 中斷 取消 傳圖 uploader.removeFile(file, true); var spthisdiv = $(this).parent(); spthisdiv.parent('.file-item').remove(); $filePicker.show(); // 上傳按鈕顯示 }); // }); } // 刪除服務器文件 function removehttpfiles() { // 刪除本條數據 // $('.delimgbtns').each(function(index, el) { $('.delimgbtns').click(function() { // event.preventDefault(); var spthisdiv = $(this).parent(); // 如果上傳成功才執行 var thisimgsrc = spthisdiv.siblings('img').attr('src'); var geturl = "attach/deleteFlowFile"; $.axpost( geturl, { url: thisimgsrc, }, //請求成功時處理 function(data) { layer.msg('刪除成功'); }); }); // }); }});
行了， 代碼我都貼了再不給我點贊？ 請不要做伸手黨 ，如果有什么不明白 請 （看我安利我的 公眾號） ?不明白 或者直接加我 ?千人前端QQ群 ：?147250970
掃描長按二維碼，關注我的公眾號
總結
以上是生活随笔為你收集整理的webupload 上传插件 完美版 - 拿走直接用的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
