多圖上傳-webupload 使用詳解

WebUploader是由Baidu WebFE(FEX)團隊開發的一個簡單的以HTML5為主，FLASH為輔的現代文件上傳組件。

在現代的瀏覽器里面能充分發揮HTML5的優勢，同時又不摒棄主流IE瀏覽器，沿用原來的FLASH運行時，兼容IE6+，iOS 6+, android 4+。

兩套運行時，同樣的調用方式，可供用戶任意選用。

采用大文件分片並發上傳，極大的提高了文件上傳效率。

分片、並發

分片與並發結合，將一個大文件分割成多塊，並發上傳，極大地提高大文件的上傳速度。

當網絡問題導致傳輸錯誤時，只需要重傳出錯分片，而不是整個文件。另外分片傳輸能夠更加實時的跟蹤上傳進度。

預覽、壓縮

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

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

多途徑添加文件

支持文件多選，類型過濾，拖拽(文件&文件夾)，圖片粘貼功能。

粘貼功能主要體現在當有圖片數據在剪切板中時（截屏工具如QQ(Ctrl + ALT + A), 網頁中右擊圖片點擊復制），Ctrl + V便可添加此圖片文件。

HTML5 & FLASH

兼容主流瀏覽器，接口一致，實現了兩套運行時支持，用戶無需關心內部用了什么內核。

同時Flash部分沒有做任何UI相關的工作，方便不關心flash的用戶擴展和自定義業務需求。

MD5秒傳

當文件體積大、量比較多時，支持上傳前做文件md5值驗證，一致則可直接跳過。

如果服務端與前端統一修改算法，取段md5，可大大提升驗證性能，耗時在20ms左右。

易擴展、可拆分

采用可拆分機制, 將各個功能獨立成了小組件，可自由搭配。

采用AMD規范組織代碼，清晰明了，方便高級玩家擴展。

 

使用實例如下：

 

靜態資源引用如下：

<script type="text/javascript" src="/static/webupload/js/jquery.js"></script>
<script type="text/javascript" src="/static/webupload/js/webuploader.js"></script>
<script type="text/javascript" src="/static/webupload/js/upload.js"></script>
<link rel="stylesheet" type="text/css" href="/static/webupload/css/webuploader.css" />
<link rel="stylesheet" type="text/css" href="/static/webupload/css/style.css" />

html部分

因為是異步提交。此處我遍歷了上傳的文件路徑，便於提交

<div id="wrapper">
<div id="container">
<!--頭部，相冊選擇和格式選擇-->
<div id="uploader">
<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 action="/admin/good/img_send" method="post">
<input type="hidden" name="img_id" value="{$img_id}">
<div id='imglist'></div>
<button class="btn btn-primary" type="submit">提交數據</button>
</form>
</div>
</div>

 

js 部分：

下載組件源代碼。。找到 upload.js ， 配置如下地方

// 實例化
uploader = WebUploader.create({
pick: {
id: '#filePicker',
label: '點擊選擇圖片'
},
formData: {
uid: 123
},
dnd: '#dndArea',
paste: '#uploader',
swf: '../Uploader.swf',
chunked: false,
chunkSize: 512 * 1024,
server: '/admin/good/webupload_send',
// runtimeOrder: 'flash',
//
// 只允許選擇圖片文件。
accept: {
title: 'Images',
extensions: 'gif,jpg,jpeg,bmp,png',
mimeTypes: 'image/*'
},
method:'POST',
// 禁掉全局的拖拽功能。這樣不會出現圖片拖進頁面的時候，把圖片打開。
disableGlobalDnd: true,
fileNumLimit: 300,
fileSizeLimit: 200 * 1024 * 1024, // 200 M
fileSingleSizeLimit: 50 * 1024 * 1024 // 50 M
});
找到上傳成功事件 uploadSuccess ， 代碼如下
// 文件上傳成功，給item添加成功class, 用樣式標記上傳成功。
uploader.on( 'uploadSuccess', function( file, response ) {
$( '#'+file.id ).addClass('upload-state-done');
console.log(response.filePath);
html = "<input name='imglist[]' type='hidden' value="+ response.filePath + ">";
$("#imglist").append(html);
});

JS 部分就修改這些。。其他原封不動

 

PHP 部分 ：

在組件源代碼里邊。找到 upload.php 文件。。在你的項目里新建一個方法，源代碼復制進去，最后有修改，添加代碼如下：

$response = [
'filePath'=>"/".$uploadPath,
];

 

ps: 此處有個坑，不要用組件代碼自帶的。。我使用的時候。無論如何也不能用。一直報錯。。找了半天才解決。要在你的項目里邊新建PHP部分。。。

 

效果圖如下：