天天看點

使用SWFUpload進行多檔案上傳

swfupload可以說是目前最好的多檔案上傳工具之一,雖然它是基于flash插件開發的,但是相比目前很多js多檔案上傳還是具有很多優點:

可以同時選擇多個檔案上傳(注意是以此選擇檔案)

無重新整理上傳

可以顯示進度條

良好的浏覽器相容性

相容其他js類庫

swfupload另個優點就是它優秀的設計,它提供了一組簡明的javascript事件,借助它們開發者可以友善的在檔案上傳過程中更新頁面的内容。

下面是swfupload在具體使用過程中js代碼

multifilehandler.js

<code>function</code> <code>filequeueerror(file, errorcode, message) {</code>

<code>    </code><code>try</code> <code>{</code>

<code>        </code><code>var</code> <code>imagename =</code><code>"error.gif"</code><code>;</code>

<code>        </code><code>var</code> <code>errorname =</code><code>""</code><code>;</code>

<code>        </code><code>if</code> <code>(errorcode === swfupload.errorcode_queue_limit_exceeded) {</code>

<code>            </code><code>errorname =</code><code>"檔案超過最大上傳個數!"</code><code>;</code>

<code>        </code><code>}</code>

<code>        </code><code>if</code> <code>(errorname !==</code><code>""</code><code>) {</code>

<code>            </code><code>alert(errorname);</code>

<code>            </code><code>return</code><code>;</code>

<code>        </code><code>switch</code> <code>(errorcode) {</code>

<code>        </code><code>case</code> <code>swfupload.queue_error.zero_byte_file:</code>

<code>            </code><code>imagename =</code><code>"zerobyte.gif"</code><code>;</code>

<code>            </code><code>break</code><code>;</code>

<code>        </code><code>case</code> <code>swfupload.queue_error.file_exceeds_size_limit:</code>

<code>            </code><code>imagename =</code><code>"toobig.gif"</code><code>;</code>

<code>        </code><code>case</code> <code>swfupload.queue_error.invalid_filetype:</code>

<code>        </code><code>default</code><code>:</code>

<code>            </code><code>alert(message);</code>

<code>        </code><code>addimage(</code><code>"/modules/commons/view/multifileupload/images/"</code> <code>+ imagename);</code>

<code>    </code><code>}</code><code>catch</code> <code>(ex) {</code>

<code>        </code><code>this</code><code>.debug(ex);</code>

<code>    </code><code>}</code>

<code>}</code>

<code>function</code> <code>filedialogcomplete(numfilesselected, numfilesqueued) {</code>

<code>        </code><code>if</code> <code>(numfilesqueued &gt; 0) {</code>

<code>            </code><code>this</code><code>.startupload();</code>

<code>function</code> <code>uploadprogress(file, bytesloaded) {</code>

<code>        </code><code>var</code> <code>percent = math.ceil((bytesloaded / file.size) * 100);</code>

<code>        </code><code>var</code> <code>progress =</code><code>new</code> <code>fileprogress(file, </code><code>this</code><code>.customsettings.upload_target);</code>

<code>        </code><code>progress.setprogress(percent);</code>

<code>        </code><code>if</code> <code>(percent == 100) {</code>

<code>            </code><code>if</code><code>(showthumbnail){</code>

<code>                </code><code>progress.setstatus(</code><code>"正在建立縮略圖..."</code><code>);</code>

<code>            </code><code>}</code>

<code>            </code><code>progress.togglecancel(</code><code>false</code><code>,</code><code>this</code><code>);</code>

<code>            </code><code>uploadnum++;</code>

<code>            </code><code>setuploadnumber(uploadnum);</code>

<code>        </code><code>}</code><code>else</code> <code>{</code>

<code>            </code><code>progress.setstatus(</code><code>"正在上傳中,已完成"</code><code>+percent+</code><code>"%"</code><code>);</code>

<code>            </code><code>progress.togglecancel(</code><code>true</code><code>,</code><code>this</code><code>);</code>

<code>//檔案資料發送成功,不管是否成功儲存;其serverdata是否伺服器端處理完以後的傳回值</code>

<code>//這裡規定傳回值必須為success才代表成功</code>

<code>var</code> <code>servererrorinfo=</code><code>""</code><code>;</code>

<code>function</code> <code>uploadsuccess(file, serverdata) {</code>

<code>        </code><code>var</code> <code>sd=serverdata.replace(/ /gi,</code><code>''</code><code>).replace(/ /gi,</code><code>''</code><code>).replace(/\r/gi,</code><code>''</code><code>).replace(/\n/gi,</code><code>''</code><code>).replace(/\t/gi,</code><code>''</code><code>);</code>

<code>        </code><code>if</code><code>(showthumbnail){</code>

<code>            </code><code>var</code> <code>filepath=</code><code>".."</code><code>;</code>

<code>            </code><code>if</code><code>(savepath!=</code><code>''</code><code>){</code>

<code>                </code><code>filepath=filepath+</code><code>"/"</code><code>+savepath;</code>

<code>            </code><code>filepath=filepath+</code><code>'/'</code><code>+file.name;</code>

<code>            </code><code>addimage(filepath);</code>

<code>            </code><code>progress.setstatus(</code><code>"縮略圖建立完成!"</code><code>);</code>

<code>        </code><code>if</code><code>(sd!=</code><code>''</code><code>){</code>

<code>            </code><code>if</code><code>(sd!=</code><code>'success'</code><code>){</code>

<code>                </code><code>if</code><code>(servererrorinfo!=</code><code>''</code><code>){</code>

<code>                    </code><code>servererrorinfo+=</code><code>'&lt;br /&gt;'</code><code>;</code>

<code>                </code><code>}</code>

<code>                </code><code>servererrorinfo+=sd;</code>

<code>                </code><code>document.getelementbyid(</code><code>'diverror'</code><code>).innerhtml=servererrorinfo;</code>

<code>        </code><code>progress.togglecancel(</code><code>false</code><code>);</code>

<code>//伺服器端傳回非空值才認為上傳成功,觸發下面事件</code>

<code>function</code> <code>uploadcomplete(file) {</code>

<code>        </code><code>/*  i want the next upload to continue automatically so i'll call startupload here */</code>

<code>        </code><code>if</code> <code>(</code><code>this</code><code>.getstats().files_queued &gt; 0) {</code>

<code>            </code><code>var</code> <code>progress =</code><code>new</code> <code>fileprogress(file, </code><code>this</code><code>.customsettings.upload_target);</code>

<code>            </code><code>progress.setcomplete();</code>

<code>            </code><code>if</code><code>(!iscancel){</code>

<code>                </code><code>progress.setstatus(</code><code>"檔案上傳成功!"</code><code>);</code>

<code>            </code><code>}</code><code>else</code><code>{</code>

<code>                </code><code>progress.setstatus(</code><code>"上傳已取消!"</code><code>);</code>

<code>                </code><code>iscancel=</code><code>false</code><code>;</code>

<code>            </code><code>progress.togglecancel(</code><code>false</code><code>);</code>

<code>function</code> <code>uploaderror(file, errorcode, message) {</code>

<code>    </code><code>var</code> <code>imagename = </code><code>"error.gif"</code><code>;</code>

<code>    </code><code>var</code> <code>progress;</code>

<code>        </code><code>case</code> <code>swfupload.upload_error.file_cancelled:</code>

<code>            </code><code>try</code> <code>{</code>

<code>                </code><code>progress =</code><code>new</code> <code>fileprogress(file, </code><code>this</code><code>.customsettings.upload_target);</code>

<code>                </code><code>progress.setcancelled();</code>

<code>                </code><code>progress.setstatus(</code><code>"取消完成!"</code><code>);</code>

<code>                </code><code>progress.togglecancel(</code><code>false</code><code>);</code>

<code>            </code><code>catch</code> <code>(ex1) {</code>

<code>                </code><code>this</code><code>.debug(ex1);</code>

<code>        </code><code>case</code> <code>swfupload.upload_error.upload_stopped:</code>

<code>                </code><code>progress.setstatus(</code><code>"已停止!"</code><code>);</code>

<code>                </code><code>progress.togglecancel(</code><code>true</code><code>);</code>

<code>            </code><code>catch</code> <code>(ex2) {</code>

<code>                </code><code>this</code><code>.debug(ex2);</code>

<code>        </code><code>case</code> <code>swfupload.upload_error.upload_limit_exceeded:</code>

<code>            </code><code>imagename =</code><code>"uploadlimit.gif"</code><code>;</code>

<code>    </code><code>}</code><code>catch</code> <code>(ex3) {</code>

<code>        </code><code>this</code><code>.debug(ex3);</code>

<code>function</code> <code>addimage(src) {</code>

<code>    </code><code>var</code> <code>imagename=getfilename(src);</code>

<code>    </code><code>var</code> <code>divimage=document.createelement(</code><code>"span"</code><code>);</code>

<code>    </code><code>divimage.style.margin =</code><code>"5px"</code><code>;</code>

<code>    </code><code>divimage.style.padding =</code><code>"1px"</code><code>;</code>

<code>    </code><code>divimage.style.width =</code><code>"59px"</code><code>;</code>

<code>    </code><code>divimage.style.height =</code><code>"85px"</code><code>;</code>

<code>    </code><code>divimage.style.display=</code><code>"block"</code><code>;</code>

<code>    </code><code>divimage.style.border=</code><code>"10px"</code><code>;</code>

<code>    </code><code>divimage.style.float=</code><code>"left"</code><code>;</code>

<code>    </code><code>divimage.attachevent(</code><code>"onmouseover"</code><code>, setbackground(divimage,</code><code>"#fffacd"</code><code>));</code>

<code>    </code><code>divimage.attachevent(</code><code>"onmouseout"</code><code>, setbackground(divimage,</code><code>"#ffffff"</code><code>));</code>

<code>    </code> 

<code>    </code><code>var</code> <code>newimg = document.createelement(</code><code>"img"</code><code>);</code>

<code>    </code><code>//newimg.style.margin = "5px";</code>

<code>    </code><code>newimg.style.width =</code><code>"59px"</code><code>;</code>

<code>    </code><code>newimg.style.height =</code><code>"59px"</code><code>;</code>

<code>    </code><code>newimg.alt=imagename;</code>

<code>    </code><code>var</code> <code>divimagename=document.createelement(</code><code>"div"</code><code>);</code>

<code>    </code><code>divimagename.style.margintop=</code><code>"5px"</code><code>;</code>

<code>    </code><code>divimagename.style.width=</code><code>"59px"</code><code>;</code>

<code>    </code><code>divimagename.style.height=</code><code>"20px"</code><code>;</code>

<code>    </code><code>divimagename.style.textalign=</code><code>"center"</code><code>;</code>

<code>    </code><code>divimagename.innerhtml=imagename;</code>

<code>    </code><code>divimage.appendchild(newimg);</code>

<code>    </code><code>divimage.appendchild(divimagename);</code>

<code>    </code><code>document.getelementbyid(</code><code>"thumbnails"</code><code>).appendchild(divimage);</code>

<code>    </code><code>if</code> <code>(newimg.filters) {</code>

<code>        </code><code>try</code> <code>{</code>

<code>            </code><code>newimg.filters.item(</code><code>"dximagetransform.microsoft.alpha"</code><code>).opacity = 0;</code>

<code>        </code><code>}</code><code>catch</code> <code>(e) {</code>

<code>            </code><code>// if it is not set initially, the browser will throw an error.  this will set it if it is not set yet.</code>

<code>            </code><code>newimg.style.filter = 'progid:dximagetransform.microsoft.alpha(opacity=</code><code>' + 0 + '</code><code>)</code><code>';</code>

<code>    </code><code>} else {</code>

<code>        </code><code>newimg.style.opacity = 0;</code>

<code>    </code><code>newimg.onload = function () {</code>

<code>        </code><code>fadein(newimg, 0);</code>

<code>    </code><code>};</code>

<code>    </code><code>newimg.src = src;</code>

<code>function fadein(element, opacity) {</code>

<code>    </code><code>var reduceopacityby = 5;</code>

<code>    </code><code>var rate = 30;  // 15 fps</code>

<code>    </code><code>if (opacity &lt; 100) {</code>

<code>        </code><code>opacity += reduceopacityby;</code>

<code>        </code><code>if (opacity &gt; 100) {</code>

<code>            </code><code>opacity = 100;</code>

<code>        </code><code>if (element.filters) {</code>

<code>            </code><code>try {</code>

<code>                </code><code>element.filters.item("dximagetransform.microsoft.alpha").opacity = opacity;</code>

<code>            </code><code>} catch (e) {</code>

<code>                </code><code>// if it is not set initially, the browser will throw an error.  this will set it if it is not set yet.</code>

<code>                </code><code>element.style.filter = '</code><code>progid:dximagetransform.microsoft.alpha(opacity=</code><code>' + opacity + '</code><code>)</code><code>';</code>

<code>        </code><code>} else {</code>

<code>            </code><code>element.style.opacity = opacity / 100;</code>

<code>        </code><code>settimeout(function () {</code>

<code>            </code><code>fadein(element, opacity);</code>

<code>        </code><code>}, rate);</code>

<code>var iscancel=false;//是否取消上傳</code>

<code>var uploadnum=0;//已成功上傳檔案</code>

<code>cancelupload=function(){</code>

<code>    </code><code>document.getelementbyid('</code><code>imgcancelbutton</code><code>').style.visible='</code><code>hidden</code><code>';</code>

<code>    </code><code>swfu.cancelupload();</code>

<code>    </code><code>/*var fileprogressid = "divfileprogress";</code>

<code>    </code><code>var fileprogresswrapper = document.getelementbyid(fileprogressid);</code>

<code>    </code><code>var fileprogresselement = fileprogresswrapper.firstchild;</code>

<code>    </code><code>fileprogresselement.childnodes[2].innerhtml = '</code><code>上傳已停止!</code><code>';*/</code>

<code>    </code><code>iscancel=true;</code>

<code>setuploadnumber=function(num){</code>

<code>    </code><code>document.getelementbyid("lgduploadnumber").innerhtml="檔案上傳(已上傳&lt;span id='</code><code>spnumber</code><code>'&gt;"+num+"&lt;/span&gt;個檔案)";</code>

<code>getfilename=function(filepath){</code>

<code>    </code><code>var i=0;</code>

<code>    </code><code>if(filepath.indexof('</code><code>/</code><code>')==-1){</code>

<code>        </code><code>i=filepath.lastindexof('</code><code>\\</code><code>');</code>

<code>    </code><code>}else{</code>

<code>        </code><code>i=filepath.lastindexof('</code><code>/</code><code>');</code>

<code>    </code><code>var j=filepath.lastindexof('</code><code>.');</code>

<code>    </code><code>var</code> <code>filename=filepath.substring(i+1,j);</code>

<code>    </code><code>return</code> <code>filename;</code>

<code>setbackground=</code><code>function</code><code>(obj,color){</code>

<code>    </code><code>return</code> <code>function</code><code>(){</code>

<code>        </code><code>setbackgroundwithparams(obj,color);</code>

<code>setbackgroundwithparams=</code><code>function</code><code>(obj,color){</code>

<code>    </code><code>obj.style.backgroundcolor=color;</code>

<code>    </code><code>obj.style.border=</code><code>"1px"</code><code>;</code>

<code>    </code><code>obj.style.bordercolor=</code><code>"red"</code><code>;</code>

<code>/* ******************************************</code>

<code> </code><code>*  fileprogress object</code>

<code> </code><code>*  control object for displaying file info</code>

<code> </code><code>* ****************************************** */</code>

<code>function</code> <code>fileprogress(file, targetid) {</code>

<code>    </code><code>this</code><code>.fileprogressid =</code><code>"divfileprogress"</code><code>;</code>

<code>    </code><code>this</code><code>.fileprogresswrapper = document.getelementbyid(</code><code>this</code><code>.fileprogressid);</code>

<code>    </code><code>if</code> <code>(!</code><code>this</code><code>.fileprogresswrapper) {</code>

<code>        </code><code>this</code><code>.fileprogresswrapper = document.createelement(</code><code>"div"</code><code>);</code>

<code>        </code><code>this</code><code>.fileprogresswrapper.classname =</code><code>"progresswrapper"</code><code>;</code>

<code>        </code><code>this</code><code>.fileprogresswrapper.id =</code><code>this</code><code>.fileprogressid;</code>

<code>        </code><code>this</code><code>.fileprogresselement = document.createelement(</code><code>"div"</code><code>);</code>

<code>        </code><code>this</code><code>.fileprogresselement.classname =</code><code>"progresscontainer"</code><code>;</code>

<code>        </code><code>var</code> <code>progresscancel = document.createelement(</code><code>"a"</code><code>);</code>

<code>        </code><code>progresscancel.classname =</code><code>"progresscancel"</code><code>;</code>

<code>        </code><code>progresscancel.href =</code><code>"#"</code><code>;</code>

<code>        </code><code>progresscancel.id =</code><code>"imgcancelbutton"</code><code>;</code>

<code>        </code><code>progresscancel.attachevent(</code><code>"onclick"</code><code>, cancelupload);</code>

<code>        </code><code>progresscancel.style.visibility =</code><code>"hidden"</code><code>;</code>

<code>        </code><code>progresscancel.appendchild(document.createtextnode(</code><code>" "</code><code>));</code>

<code>        </code><code>var</code> <code>progresstext = document.createelement(</code><code>"div"</code><code>);</code>

<code>        </code><code>progresstext.classname =</code><code>"progressname"</code><code>;</code>

<code>        </code><code>progresstext.appendchild(document.createtextnode(file.name));</code>

<code>        </code><code>var</code> <code>progressbar = document.createelement(</code><code>"div"</code><code>);</code>

<code>        </code><code>progressbar.classname =</code><code>"progressbarinprogress"</code><code>;</code>

<code>        </code><code>var</code> <code>progressstatus = document.createelement(</code><code>"div"</code><code>);</code>

<code>        </code><code>progressstatus.classname =</code><code>"progressbarstatus"</code><code>;</code>

<code>        </code><code>progressstatus.innerhtml =</code><code>" "</code><code>;</code>

<code>        </code><code>this</code><code>.fileprogresselement.appendchild(progresscancel);</code>

<code>        </code><code>this</code><code>.fileprogresselement.appendchild(progresstext);</code>

<code>        </code><code>this</code><code>.fileprogresselement.appendchild(progressstatus);</code>

<code>        </code><code>this</code><code>.fileprogresselement.appendchild(progressbar);</code>

<code>        </code><code>this</code><code>.fileprogresswrapper.appendchild(</code><code>this</code><code>.fileprogresselement);</code>

<code>        </code><code>document.getelementbyid(targetid).appendchild(</code><code>this</code><code>.fileprogresswrapper);</code>

<code>        </code><code>fadein(</code><code>this</code><code>.fileprogresswrapper, 0);</code>

<code>    </code><code>}</code><code>else</code> <code>{</code>

<code>        </code><code>this</code><code>.fileprogresselement =</code><code>this</code><code>.fileprogresswrapper.firstchild;</code>

<code>        </code><code>this</code><code>.fileprogresselement.childnodes[1].firstchild.nodevalue = file.name;</code>

<code>    </code><code>this</code><code>.height =</code><code>this</code><code>.fileprogresswrapper.offsetheight;</code>

<code>fileprogress.prototype.setprogress =</code><code>function</code> <code>(percentage) {</code>

<code>    </code><code>this</code><code>.fileprogresselement.classname =</code><code>"progresscontainer green"</code><code>;</code>

<code>    </code><code>this</code><code>.fileprogresselement.childnodes[3].classname =</code><code>"progressbarinprogress"</code><code>;</code>

<code>    </code><code>this</code><code>.fileprogresselement.childnodes[3].style.width = percentage +</code><code>"%"</code><code>;</code>

<code>};</code>

<code>fileprogress.prototype.setcomplete =</code><code>function</code> <code>() {</code>

<code>    </code><code>this</code><code>.fileprogresselement.classname =</code><code>"progresscontainer blue"</code><code>;</code>

<code>    </code><code>this</code><code>.fileprogresselement.childnodes[3].classname =</code><code>"progressbarcomplete"</code><code>;</code>

<code>    </code><code>this</code><code>.fileprogresselement.childnodes[3].style.width =</code><code>""</code><code>;</code>

<code>fileprogress.prototype.seterror =</code><code>function</code> <code>() {</code>

<code>    </code><code>this</code><code>.fileprogresselement.classname =</code><code>"progresscontainer red"</code><code>;</code>

<code>    </code><code>this</code><code>.fileprogresselement.childnodes[3].classname =</code><code>"progressbarerror"</code><code>;</code>

<code>fileprogress.prototype.setcancelled =</code><code>function</code> <code>() {</code>

<code>    </code><code>this</code><code>.fileprogresselement.classname =</code><code>"progresscontainer"</code><code>;</code>

<code>fileprogress.prototype.setstatus =</code><code>function</code> <code>(status) {</code>

<code>    </code><code>this</code><code>.fileprogresselement.childnodes[2].innerhtml = status;</code>

<code>fileprogress.prototype.togglecancel =</code><code>function</code> <code>(show, swfuploadinstance) {</code>

<code>    </code><code>this</code><code>.fileprogresselement.childnodes[0].style.visibility = show ?</code><code>"visible"</code> <code>:</code><code>"hidden"</code><code>;</code>

<code>    </code><code>if</code> <code>(swfuploadinstance) {</code>

<code>        </code><code>var</code> <code>fileid =</code><code>this</code><code>.fileprogressid;</code>

<code>        </code><code>this</code><code>.fileprogresselement.childnodes[0].onclick =</code><code>function</code> <code>() {</code>

<code>            </code><code>swfuploadinstance.cancelupload(fileid);</code>

<code>            </code><code>return</code> <code>false</code><code>;</code>

<code>        </code><code>};</code>

multifileupload.js

<code>var</code> <code>uploadurl=</code><code>'$!{request.uploadurl}'</code><code>;</code><code>//上傳處理的url</code>

<code>var</code> <code>savepath=</code><code>'$!{request.savepath}'</code><code>;</code>

<code>var</code> <code>filetype=</code><code>'$!{request.filetype}'</code><code>;</code>

<code>//var postname='$request.postname';</code>

<code>var</code> <code>sizelimit=</code><code>'$!{request.sizelimit}'</code><code>;</code>

<code>var</code> <code>uploadlimit=</code><code>'$!{request.uploadlimit}'</code><code>;</code>

<code>//var buttonwidth='$!{request.buttonwidth}';</code>

<code>//var buttonheight='$!{request.buttonheight}';</code>

<code>var</code> <code>buttontext=</code><code>'$!{request.buttontext}'</code><code>;</code>

<code>var</code> <code>buttonalign=</code><code>'$!{request.buttonalign}'</code><code>;</code>

<code>var</code> <code>componentheight=</code><code>'$!{request.componentheight}'</code><code>;</code>

<code>var</code> <code>showthumbnail=</code><code>'$!{request.showthumbnail}'</code><code>;</code><code>//是否顯示縮略圖,一般用于圖檔上傳,預設為false</code>

<code>var</code> <code>thumbnailscroll=</code><code>'$!{request.thumbnailscroll}'</code><code>;</code><code>//縮略圖部分是否顯示滾動條</code>

<code>if</code><code>(uploadurl==</code><code>''</code><code>){</code>

<code>    </code><code>//uploadurl='/commons/fileupload.do';</code>

<code>    </code><code>uploadurl=</code><code>'/commons/paste.do?template=/multifileupload/data/upload.htm'</code><code>;</code>

<code>//if(postname=''){</code>

<code>//    postname= "filedata";</code>

<code>//}</code>

<code>if</code><code>(filetype==</code><code>''</code><code>){</code>

<code>    </code><code>filetype=</code><code>'*.*'</code><code>;</code>

<code>if</code><code>(uploadlimit==</code><code>''</code><code>){</code>

<code>    </code><code>uploadlimit=0;</code>

<code>//if(buttonwidth==''){</code>

<code>//    buttonwidth=100;</code>

<code>//if(buttonheight==''){</code>

<code>//    buttonheight=22;</code>

<code>if</code><code>(buttontext==</code><code>''</code><code>){</code>

<code>    </code><code>buttontext=</code><code>'選 擇 文 件'</code><code>;</code>

<code>if</code><code>(buttonalign==</code><code>''</code><code>){</code>

<code>    </code><code>buttonalign=</code><code>'left'</code><code>;</code>

<code>if</code><code>(showthumbnail==</code><code>''</code><code>){</code>

<code>    </code><code>showthumbnail=</code><code>false</code><code>;</code>

<code>}</code><code>else</code><code>{</code>

<code>    </code><code>showthumbnail=</code><code>true</code><code>;</code>

<code>if</code><code>(thumbnailscroll==</code><code>''</code><code>){</code>

<code>    </code><code>thumbnailscroll=</code><code>false</code><code>;</code>

<code>    </code><code>thumbnailscroll=</code><code>true</code><code>;</code>

<code>if</code><code>(uploadurl.indexof(</code><code>'?'</code><code>)!=-1){</code>

<code>    </code><code>uploadurl=uploadurl+</code><code>'&amp;savepath='</code><code>+encodeuricomponent(savepath);</code>

<code>    </code><code>uploadurl=uploadurl+</code><code>'?savepath='</code><code>+encodeuricomponent(savepath);</code>

<code>var</code> <code>swfu;</code>

<code>window.onload =</code><code>function</code> <code>() {</code>

<code>    </code><code>swfu =</code><code>new</code> <code>swfupload({</code>

<code>        </code><code>upload_url: uploadurl,</code>

<code>        </code><code>file_size_limit : sizelimit,</code>

<code>        </code><code>file_types : filetype,</code>

<code>        </code><code>//file_types_description : "jpg images",</code>

<code>        </code><code>file_upload_limit : uploadlimit,   </code><code>// zero means unlimited</code>

<code>        </code><code>file_queue_error_handler : filequeueerror,</code>

<code>        </code><code>file_dialog_complete_handler : filedialogcomplete,</code>

<code>        </code><code>upload_progress_handler : uploadprogress,</code>

<code>        </code><code>upload_error_handler : uploaderror,</code>

<code>        </code><code>upload_success_handler : uploadsuccess,</code>

<code>        </code><code>upload_complete_handler : uploadcomplete,</code>

<code>        </code><code>button_image_url :</code><code>"/modules/commons/view/multifileupload/images/xpbuttonnotext_160x22.png"</code><code>,</code>

<code>        </code><code>button_placeholder_id :</code><code>"spanbuttonplaceholder"</code><code>,</code>

<code>        </code><code>button_width: 101,</code>

<code>        </code><code>button_height: 22,</code>

<code>        </code><code>button_text : buttontext,</code>

<code>        </code><code>button_text_style :</code><code>'.button { font-family: 華文行楷,宋體, arial, sans-serif; font-size: 14pt; } .buttonsmall { font-size: 10pt; }'</code><code>,</code>

<code>        </code><code>button_text_top_padding: 1,</code>

<code>        </code><code>button_text_left_padding: 20,</code>

<code>        </code><code>flash_url :</code><code>"/modules/commons/js/swfupload/swfupload.swf"</code><code>,</code>

<code>        </code><code>custom_settings : {</code>

<code>            </code><code>upload_target :</code><code>"divfileprogresscontainer"</code>

<code>        </code><code>},</code>

<code>        </code><code>debug:</code><code>false</code>

<code>    </code><code>});</code>

<code>    </code><code>if</code><code>(thumbnailscroll){</code>

<code>        </code><code>var</code> <code>divthumbnails=document.getelementbyid(</code><code>"thumbnails"</code><code>);</code>

<code>        </code><code>var</code> <code>divcontent=document.getelementbyid(</code><code>"content"</code><code>);</code>

<code>        </code><code>divcontent.style.width=</code><code>"400px"</code><code>;</code>

<code>        </code><code>divthumbnails.style.height=</code><code>'200px'</code><code>;</code>

<code>        </code><code>divthumbnails.style.overflowy=</code><code>"scroll"</code><code>;</code>

<code>        </code><code>divthumbnails.style.border=</code><code>"solid 1px #ddf0dd"</code><code>;</code>

<code>    </code><code>document.getelementbyid(</code><code>"divbuttonplaceholder"</code><code>).style.textalign=buttonalign;</code>

<code>    </code><code>if</code><code>(componentheight!=</code><code>''</code><code>){</code>

<code>        </code><code>componentheight=componentheight.replace(</code><code>"px"</code><code>,</code><code>""</code><code>);</code>

<code>        </code><code>componentheight=number(componentheight)-25;</code><code>//去掉空隙和按鈕高度</code>

<code>        </code><code>document.getelementbyid(</code><code>"fsprogress"</code><code>).style.height=componentheight+</code><code>"px"</code><code>;</code>

其中multifilehandler.js是對于上傳過程中各個事件的處理,multifileupload.js是swfupload的使用,"$"符号開頭的變量在實際使用過程中可以自由定制,另外在此還要提醒大家,。代碼中的savepath變量是檔案最後的儲存路徑,背景隻要讀取此變量儲存到相應的位置即可。下面是背景代碼:

<code>using</code> <code>system;</code>

<code>using</code> <code>system.data;</code>

<code>using</code> <code>system.configuration;</code>

<code>using</code> <code>system.collections;</code>

<code>using</code> <code>system.web;</code>

<code>using</code> <code>system.web.security;</code>

<code>using</code> <code>system.web.ui;</code>

<code>using</code> <code>system.web.ui.webcontrols;</code>

<code>using</code> <code>system.web.ui.webcontrols.webparts;</code>

<code>using</code> <code>system.web.ui.htmlcontrols;</code>

<code>namespace</code> <code>webapplication1</code>

<code>{</code>

<code>    </code><code>public</code> <code>partial</code> <code>class</code> <code>fileupload : system.web.ui.page</code>

<code>    </code><code>{</code>

<code>        </code><code>protected</code> <code>void</code> <code>page_load(</code><code>object</code> <code>sender, eventargs e)</code>

<code>        </code><code>{</code>

<code>            </code><code>string</code> <code>path=</code><code>""</code><code>;</code>

<code>            </code><code>httppostedfile file= request.files[</code><code>"filedata"</code><code>];</code>

<code>            </code><code>string</code> <code>relationpath=request[</code><code>"savepath"</code><code>];</code>

<code>            </code><code>if</code><code>(relationpath!=</code><code>string</code><code>.empty)</code>

<code>            </code><code>{</code>

<code>                </code><code>path=server.mappath(</code><code>"~/"</code><code>)+relationpath+</code><code>"\\"</code><code>+file.filename;</code>

<code>            </code><code>file.saveas(path);</code>

<code>            </code><code>response.write(</code><code>"success"</code><code>);</code>

需要注意的是在背景一定要給出傳回值(例如上面代碼中response.write("success"))否則swfupload就不認為是上傳完成。

下面的實際效果:

使用SWFUpload進行多檔案上傳
使用SWFUpload進行多檔案上傳
使用SWFUpload進行多檔案上傳

ok,今天就到這裡吧。

繼續閱讀