Web文件上传模块 Plupload
阅读原文时间:2023年07月08日阅读:3

Plupload 是一个Web浏览器上的界面友好的文件上传模块,可显示上传进度、图像自动缩略和上传分块。可同时上传多个文件。

示例代码:

<!--&nbsp;Load&nbsp;Queue&nbsp;widget&nbsp;CSS&nbsp;and&nbsp;jQuery&nbsp;-->

<``style type``=``"text/css"``>@import&nbsp;url(css/plupload.queue.css);</``style``>

<``script type``=``"text/javascript" src``=``"http://www.google.com/jsapi"``></``script``>

<``script type``=``"text/javascript"``>

google.load("jquery",&nbsp;"1.3");

</``script``>

<!--&nbsp;Thirdparty&nbsp;intialization&nbsp;scripts,&nbsp;needed&nbsp;for&nbsp;the&nbsp;Google&nbsp;Gears&nbsp;and&nbsp;BrowserPlus&nbsp;runtimes&nbsp;-->

<``script type``=``"text/javascript" src``=``"/plupload/js/gears_init.js"``></``script``>

<``script type``=``"text/javascript" src``=``"http://bp.yahooapis.com/2.4.21/browserplus-min.js"``></``script``>

<!--&nbsp;Load&nbsp;plupload&nbsp;and&nbsp;all&nbsp;it's&nbsp;runtimes&nbsp;and&nbsp;finally&nbsp;the&nbsp;jQuery&nbsp;queue&nbsp;widget&nbsp;-->

<``script type``=``"text/javascript" src``=``"/plupload/js/plupload.full.min.js"``></``script``>

<``script type``=``"text/javascript" src``=``"/plupload/js/jquery.plupload.queue.min.js"``></``script``>

<``script type``=``"text/javascript"``>

//&nbsp;Convert&nbsp;divs&nbsp;to&nbsp;queue&nbsp;widgets&nbsp;when&nbsp;the&nbsp;DOM&nbsp;is&nbsp;ready

$().ready(function()&nbsp;{

$("#uploader").pluploadQueue({

//&nbsp;General&nbsp;settings

runtimes&nbsp;:&nbsp;'gears,flash,silverlight,browserplus,html5',

url&nbsp;:&nbsp;'upload.php',

max_file_size&nbsp;:&nbsp;'10mb',

chunk_size&nbsp;:&nbsp;'1mb',

unique_names&nbsp;:&nbsp;true,

//&nbsp;Resize&nbsp;images&nbsp;on&nbsp;clientside&nbsp;if&nbsp;we&nbsp;can

resize&nbsp;:&nbsp;{width&nbsp;:&nbsp;320,&nbsp;height&nbsp;:&nbsp;240,&nbsp;quality&nbsp;:&nbsp;90},

//&nbsp;Specify&nbsp;what&nbsp;files&nbsp;to&nbsp;browse&nbsp;for

filters&nbsp;:&nbsp;[

{title&nbsp;:&nbsp;"Image&nbsp;files",&nbsp;extensions&nbsp;:&nbsp;"jpg,gif,png"},

{title&nbsp;:&nbsp;"Zip&nbsp;files",&nbsp;extensions&nbsp;:&nbsp;"zip"}

],

//&nbsp;Flash&nbsp;settings

flash_swf_url&nbsp;:&nbsp;'/plupload/js/plupload.flash.swf',

//&nbsp;Silverlight&nbsp;settings

silverlight_xap_url&nbsp;:&nbsp;'/plupload/js/plupload.silverlight.xap'

});

//&nbsp;Client&nbsp;side&nbsp;form&nbsp;validation

$('form').submit(function(e)&nbsp;{

var&nbsp;uploader&nbsp;=&nbsp;$('#uploader').pluploadQueue();

//&nbsp;Validate&nbsp;number&nbsp;of&nbsp;uploaded&nbsp;files

if&nbsp;(uploader.total.uploaded&nbsp;==&nbsp;0)&nbsp;{

//&nbsp;Files&nbsp;in&nbsp;queue&nbsp;upload&nbsp;them&nbsp;first

if&nbsp;(uploader.files.length&nbsp;>&nbsp;0)&nbsp;{

//&nbsp;When&nbsp;all&nbsp;files&nbsp;are&nbsp;uploaded&nbsp;submit&nbsp;form

uploader.bind('UploadProgress',&nbsp;function()&nbsp;{

if&nbsp;(uploader.total.uploaded&nbsp;==&nbsp;uploader.files.length)

$('form').submit();

});

uploader.start();

}&nbsp;else

alert('You&nbsp;must&nbsp;at&nbsp;least&nbsp;upload&nbsp;one&nbsp;file.');

e.preventDefault();

}

});

});

</``script``>

...

<``form ..>

<``div id``=``"uploader"``>

<``p``>You&nbsp;browser&nbsp;doesn't&nbsp;have&nbsp;Flash,&nbsp;Silverlight,&nbsp;Gears,&nbsp;BrowserPlus&nbsp;or&nbsp;HTML5&nbsp;support.</``p``>

</``div``>

</``form``>