webupload教你如何上傳大文件
- WBOY原創
- 2016-08-04 08:56:211091瀏覽
本文分享了webupload大檔案不同上傳三種實例：檔案上傳，圖片上傳和html5拖曳上傳圖片，這個可應用在手機上傳。 
//上傳圖片<br>
// 初始化Web Uploader<br>
var uploader = WebUploader.create({<br>
<br>
// 選完文件後，是否自動上傳。 <br>
auto: true,<br>
<br>
// swf檔案路徑<br>
swf: 'js/Uploader.swf',<br>
<br>
// 文件接收服務端。 <br>
server: 'upload.php',<br>
<br>
// 選擇檔案的按鈕。可選。 <br>
// 內部根據目前運作是創建，可能是input元素，也可能是flash.<br>
pick: '#imgPicker',<br>
<br>
// 只允許選擇圖片檔案。 <br>
accept: {<br>
title: 'Images',<br>
extensions: 'gif,jpg,jpeg,bmp,png',<br>
mimeTypes: 'image/*'<br>
}<br>
});<br>
<br>
// 當有文件加入的時候<br>
uploader.on( 'fileQueued', function( file ) {<br>
var $list = $("#fileList"),<br>
$li = $(<br>
'<div>' +<br>
'<img alt="webupload教你如何上傳大文件" >' +<br>
'<div>' + file.name + '</div>' +<br>
'</div>'<br>
),<br>
$img = $li.find('img');<br>
<br>
<br>
// $list為容器jQuery實例<br>
$list.append( $li );<br>
<br>
// 建立縮圖<br>
// 若為非圖片文件，可不使用此方法。 <br>
// thumbnailWidth x thumbnailHeight 為 100 x 100<br>
uploader.makeThumb( file, function( error, src ) {<br>
if ( error ) {<br>
$img.replaceWith('<span>無法預覽</span>');<br>
return;<br>
}<br>
<br>
$img.attr( 'src', src );<br>
}, 100, 100 );<br>
});webupload即時拖曳上傳示範：http://www.sucaihuo.com/js/901.html
功能強大的檔案上傳外掛程式帶上傳進度-WebUploader.zip
( 188.94 KB 下載：21 次 )