溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家分享的是有關如何使用WebUploader的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。
我們首先將css和相關js文件加載。
<link rel="stylesheet" type="text/css" href="css/webuploader.css">
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="js/webuploader.min.js"></script>
然后我們需要準備一個按鈕#imgPicker，和一個用來存放添加的文件信息列表的容器#fileList，在body中加入如下代碼：
<p id="uploadimg">
<p id="fileList" class="uploader-list"></p>
<p id="imgPicker">選擇圖片</p>
</p>
首先創建Web Uploader實例：
var uploader = WebUploader.create({
auto: true, // 選完文件后，是否自動上傳
swf: 'js/Uploader.swf', // swf文件路徑
server: 'upload.php', // 文件接收服務端
pick: '#imgPicker', // 選擇文件的按鈕。可選
// 只允許選擇圖片文件。
accept: {
title: 'Images',
extensions: 'gif,jpg,jpeg,bmp,png',
mimeTypes: 'image/*'
}
});
接著監聽fileQueued事件，即當有文件添加進來的時候，通過uploader.makeThumb來創建圖片預覽圖。
uploader.on( 'fileQueued', function( file ) {
var $list = $("#fileList"),
$li = $(
'<p id="' + file.id + '" class="file-item thumbnail">' +
'<img>' +
'<p class="info">' + file.name + '</p>' +
'</p>'
),
$img = $li.find('img');
// $list為容器jQuery實例
$list.append( $li );
// 創建縮略圖
uploader.makeThumb( file, function( error, src ) {
if ( error ) {
$img.replaceWith('<span>不能預覽</span>');
return;
}
$img.attr( 'src', src );
}, 100, 100 ); //100x100為縮略圖尺寸
});
最后是上傳狀態提示了，當文件上傳過程中, 上傳成功，上傳失敗，上傳完成都分別對應uploadProgress, uploadSuccess, uploadError, uploadComplete事件。
// 文件上傳過程中創建進度條實時顯示。
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, res ) {
console.log(res.filePath);//這里可以得到上傳后的文件路徑
$( '#'+file.id ).addClass('upload-state-done');
});
// 文件上傳失敗，顯示上傳出錯。
uploader.on( 'uploadError', function( file ) {
var $li = $( '#'+file.id ),
$error = $li.find('p.error');
// 避免重復創建
if ( !$error.length ) {
$error = $('<p class="error"></p>').appendTo( $li );
}
$error.text('上傳失敗');
});
// 完成上傳完了，成功或者失敗，先刪除進度條。
uploader.on( 'uploadComplete', function( file ) {
$( '#'+file.id ).find('.progress').remove();
});
到這里，我們就實現了一個簡單的圖片上傳實例，點擊“選擇圖片”會彈出文件選擇對話框，當選擇圖片后，即進入上傳圖片流程，會將圖片對應的縮略圖現實在列表里。
Web Uploader提供了豐富的API選項設置與事件調用。
參數描述默認值dnd[可選] 指定Drag And Drop拖拽的容器，如果不指定，則不啟動。undefineddisableGlobalDnd[可選] 指定監聽paste事件的容器，如果不指定，不啟用此功能。此功能為通過粘貼來添加截屏的圖片。建議設置為document.body.undefinedpick[可選], Object,指定選擇文件的按鈕容器，不指定則不創建按鈕。 id {Seletor|dom} 指定選擇文件的按鈕容器，不指定則不創建按鈕。注意 這里雖然寫的是 id, 但是不是只支持 id, 還支持 class, 或者 dom 節點。label {String} 請采用 innerHTML 代替 innerHTML {String} 指定按鈕文字。不指定時優先從指定的容器中看是否自帶文字。multiple {Boolean} 是否開起同時選擇多個文件能力。undefinedaccept[可選] 指定可接受的文件類型。title {String} 文字描述extensions {String} 允許的文件后綴，不帶點，多個用逗號分割。mimeTypes {String} 多個用逗號分割。nullthumb{Object} [可選] 配置生成縮略圖的選項。compress{Object} [可選] 配置壓縮的圖片的選項。如果此選項為false, 則圖片在上傳前不進行壓縮。auto[可選] 設置為 true 后，不需要手動調用上傳，有文件選擇即開始上傳。falseruntimeOrder[可選] 指定運行時啟動順序。默認會想嘗試 html5 是否支持，如果支持則使用 html5, 否則則使用 flash. 可以將此值設置成 flash，來強制使用 flash 運行時。html5,flashchunked[可選] 是否要分片處理大文件上傳。falsechunkSize[可選] 如果要分片，分多大一片？ 默認大小為5M.5242880chunkRetry[可選]如果某個分片由于網絡問題出錯，允許自動重傳次數。2threads[可選] 上傳并發數。允許同時最大上傳進程數。3formData[可選]文件上傳請求的參數表，每次發送都會發送此對象中的參數。{}fileVal[可選] 設置文件上傳域的name。filefileNumLimit[可選] 驗證文件總數量, 超出則不允許加入隊列。undefinedfileSizeLimit[可選] 驗證文件總大小是否超出限制, 超出則不允許加入隊列。undefinedfileSingleSizeLimit[可選] 驗證單個文件大小是否超出限制, 超出則不允許加入隊列。undefinedduplicate[可選] 去重， 根據文件名字、文件大小和最后修改時間來生成hash Key.undefined
常用的事件說明：
事件參數說明描述beforeFileQueuedfile {File}File對象當文件被加入隊列之前觸發，此事件的handler返回值為false，則此文件不會被添加進入隊列。fileQueuedfile {File}File對象當文件被加入隊列以后觸發。filesQueuedfile {File}數組，內容為原始File(lib/File）對象。當一批文件添加進隊列以后觸發。fileDequeuedfile {File}File對象當文件被移除隊列后觸發。uploadStartfile {File}File對象某個文件開始上傳前觸發，一個文件只會觸發一次。uploadBeforeSendobject {Object}data {Object}默認的上傳參數，可以擴展此對象來控制上傳參數。headers {Object}可以擴展此對象來控制上傳頭部。當某個文件的分塊在發送前觸發，主要用來詢問是否要添加附帶參數，大文件在開起分片上傳的前提下此事件可能會觸發多次。uploadProgressfile {File}File對象percentage {Number}上傳進度上傳過程中觸發，攜帶上傳進度。uploadErrorfile {File}File對象reason {String}出錯的code當文件上傳出錯時觸發。uploadSuccessfile {File}File對象response {Object}服務端返回的數據當文件上傳成功時觸發。uploadCompletefile {File} [可選]File對象不管成功或者失敗，文件上傳完成時觸發。
upload.php接收上傳數據，將上傳的文件保存到服務器相關目錄，并將上傳結果告知前端上傳組件。
這里值得一提的是，如果設置了大文件分片上傳，PHP將每次上傳的小文件片臨時保存，等最后文件片全部接收完畢后再將這些臨時文件片組合，成為一個完整的大文件。
webuploader的分片上傳是把文件分成若干份，然后向你定義的文件接收端post數據，如果上傳的文件大于分片的尺寸，就會進行分片，然后會在post的數據中添加兩個form元素chunk和chunks，前者標示當前分片在上傳分片中的順序（從0開始），后者代表總分片數。
感謝各位的閱讀！關于“如何使用WebUploader”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
