系列文章目錄

第十章 Minio WebUploader上傳文件的高級用法之進度條顯示、文件過濾、圖片預覽、圖片壓縮

---

---

進度條顯示

使用進程文件上傳時，進度條顯示是一個常用的功能，而WebUploader組件也是支持的。

文件上傳中，Web Uploader會對外派送uploadProgress事件，其中包含文件對象和該文件當前上傳進度。

我們這里只需要在JS中添加以上事件就可以了。

  // 文件上傳過程中創建進度條實時顯示。uploader.on('uploadProgress', function (file, percentage) {let $li = $('#' + file.id),$percent = $li.find('.progress .progress-bar');// 避免重復創建if (!$percent.length) {$percent = $('<div class="progress progress-striped active">' +'<div class="progress-bar" role="progressbar" style="width: 0%">' +'</div>' +'</div>').appendTo($li).find('.progress-bar');}$li.find('p.state').text('上傳中(' + ((percentage * 100).toFixed(2) + '%') + ')');$percent.css('width', percentage * 100 + '%');});

注意，這里有一個坑，進度條的樣式需要自己配置，所以要在webuploader.css文件中添加以下CSS樣式。

.progress {height: 20px;margin-bottom: 20px;overflow: hidden;background-color:f5f5f5;border-radius: 4px;-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}
.progress.active .progress-bar {-webkit-animation: progress-bar-stripes 2s linear infinite;animation: progress-bar-stripes 2s linear infinite;
}.progress-striped .progress-bar {background-image: linear-gradient(45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);background-size: 40px 40px;
}
.progress-bar {background-image: -webkit-linear-gradient(top,#428bca 0,#3071a9 100%);background-image: linear-gradient(to bottom,#428bca 0,#3071a9 100%);background-repeat: repeat-x;filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#ff428bca’,endColorstr=’#ff3071a9’,GradientType=0);
}
.progress-bar {float: left;height: 100%;font-size: 12px;line-height: 20px;color:fff;text-align: center;background-color:428bca;box-shadow: inset 0 -1px 0 rgba(0,0,0,0.15);transition: width .6s ease;
}

點擊上傳，進度條就成功顯示了

---

文件過濾

文件過濾可以對添加的文件類型進行限制，比如只能上傳圖片，這也是一個常用的功能。

實際使用時，只需要在初始化uploader時，添加accept配置就可以了。比如以下代碼表示，只能添加圖片。

// 初始化Web Uploaderconst uploader = WebUploader.create({// swf文件路徑swf: 'static/Uploader.swf',server: '/minio/upload',// 文件接收服務端。pick: '#picker',// 選擇文件的按鈕。可選。內部根據當前運行是創建，可能是input元素，也可能是flash. 這里是div的idmethod: 'POST', // 文件上傳方式，POST或者GET，默認Postresize: false,// 不壓縮image, 默認如果是jpeg，文件上傳前會壓縮一把再上傳！// 只允許選擇圖片文件。accept: {title: 'Images',extensions: 'gif,jpg,jpeg,bmp,png',mimeTypes: 'image/*'}});

點擊選擇文件，發現只能選擇圖片類型。就算選擇到了非圖片類型，也無法添加到上傳隊列中。

圖片預覽

WebUploader支持在添加圖片后，展示預覽圖。監聽fileQueued事件，通過uploader.makeThumb來創建圖片預覽圖。 注意這里得到的是Data URL數據，IE6、IE7不支持直接預覽。可以借助FLASH或者服務端來完成預覽。

這里我們添加一個fileQueued事件。

// 當有文件添加進來的時候uploader.on('fileQueued', function (file) {// 縮略圖大小var ratio = window.devicePixelRatio || 1;var thumbnailWidth = 100 * ratio;var thumbnailHeight = 100 * ratio;var $ = jQuery;var $list = $('#list');var $li = $('<div id="' + file.id + '" class="file-item thumbnail">' +'<img>' +'<div class="info">' + file.name + '</div>' +'</div>'),$img = $li.find('img');// $list為容器jQuery實例$list.append($li);// 創建縮略圖// 如果為非圖片文件，可以不用調用此方法。// thumbnailWidth x thumbnailHeight 為 100 x 100uploader.makeThumb(file, function (error, src) {if (error) {$img.replaceWith('<span>不能預覽</span>');return;}$img.attr('src', src);}, thumbnailWidth, thumbnailHeight);});

然后點擊選擇文件，預覽圖效果就出來了。

圖片壓縮

支持常用圖片格式jpg,jpeg,gif,bmp,png預覽與壓縮，節省網絡數據傳輸。

解析jpeg中的meta信息，對于各種orientation做了正確的處理，同時壓縮后上傳保留圖片的所有原始meta數據。

只需要在初始化添加compress，配置壓縮的圖片的選項。如果此選項為false, 則圖片在上傳前不進行壓縮。

比如以下代碼表示對圖片進行壓縮。

// 初始化Web Uploaderconst uploader = WebUploader.create({// swf文件路徑swf: 'static/Uploader.swf',server: '/minio/upload',// 文件接收服務端。pick: '#picker',// 選擇文件的按鈕。可選。內部根據當前運行是創建，可能是input元素，也可能是flash. 這里是div的idmethod: 'POST', // 文件上傳方式，POST或者GET，默認Postresize: false,// 不壓縮image, 默認如果是jpeg，文件上傳前會壓縮一把再上傳！compress:{width: 100,height: 100,// 圖片質量，只有type為image/jpeg的時候才有效。quality: 50,// 是否允許放大，如果想要生成小圖的時候不失真，此選項應該設置為false.allowMagnify: false,// 是否允許裁剪。crop: false,// 是否保留頭部meta信息。preserveHeaders: true,// 如果發現壓縮后文件大小比原來還大，則使用原來圖片// 此屬性可能會影響圖片自動糾正功能noCompressIfLarger: false,// 單位字節，如果圖片大小小于此值，不會采用壓縮。compressSize: 0}});

然后在頁面上上傳一個170K的文件：
然后登錄Minio，發現圖片被壓縮到了2.4k。

---