凡做過(guò)網(wǎng)站開(kāi)發(fā)的都應(yīng)該知道表單file的確雞肋。

Ajax解決了不刷新頁(yè)面提交表單，但是卻沒(méi)有解決文件上傳不刷新頁(yè)面，當(dāng)然也有其它技術(shù)讓不刷新頁(yè)面而提交文件，該技術(shù)主要是利用隱藏的iFrame， 較Ajax要麻煩許多，而且其提交方式依然在底層是使用的表單file，這里我們不詳談。而且如果是提交較小的文件，我們能接受，如果提交的文件較大，我 們便要忍受很長(zhǎng)的等待時(shí)間，而瀏覽器卻沒(méi)有任何提示，我們也沒(méi)有辦法知道文件上傳的進(jìn)度…

但是現(xiàn)在，網(wǎng)上出現(xiàn)了一個(gè)名為SWFUpload的上傳組件，該組件利用Flash自身的文件提交技術(shù)而無(wú)需刷新頁(yè)面，而且能夠獲取文件上傳進(jìn)度，可以提交多個(gè)文件，而且還能控制上傳文件的大小，類(lèi)型等信息。這么一個(gè)強(qiáng)大而易用的東西，你還在尋找么？

下面就是是SWFUupload的簡(jiǎn)易教程，服務(wù)端大同小異，我這里以php為例。（該教程基于SWFUpload2.2.0.1，雖然 SWFUpload v2.5.0 Beta 3已經(jīng)放出，但是考慮到是測(cè)試版，肯定用不穩(wěn)定的因素，我決定將穩(wěn)定的2.2.0.1作為本次學(xué)習(xí)的版本）。

下載SWFUpload

下載地址：swfupload.googlecode 下載完后解壓到某個(gè)目錄，我這里放在labs.goodje 自需要保留目錄下的swfupload.js,Flash/swfupload.swf兩個(gè)文件和plugins目錄,其它的都可以刪掉。

• swfupload.js:?swfupload的js腳本，封裝swfupload.swf的各種接口供js調(diào)用，簡(jiǎn)化操作。
• swfupload.swf:?swfupload的核心所在，上傳多個(gè)文件，提供上傳進(jìn)度，限制文件容量尺寸等提優(yōu)于于上傳表單功能的工具，實(shí)質(zhì)是一個(gè)flash。

• plugins目錄:?swfupload的各種插件。其中swfupload.cookies.js用于解決ie中flash請(qǐng)求服務(wù)器時(shí)，請(qǐng)求頭中不帶cookie的bug。swfupload.queue.js插件提供更強(qiáng)大的上傳隊(duì)列功能，比如說(shuō)取消隊(duì)列等等。?swfupload.speed.js插件提供上傳速度，上傳剩余時(shí)間，以上傳事件等信息。?swfupload.swfobject.js插件集成了swfobject庫(kù)，用于將swfupload組件嵌入到dom中，而且新增了一個(gè)swfupload組件正在載入的事件。

快速入門(mén)

?新增一個(gè)上傳頁(yè)面，我們放在swfu下，但不一定非要放在swfu下，命名為tutor-1.html。

?head中插入用于引入swfupload.js的代碼

<script?src="swfupload.js"></script>

然我我們還需要一個(gè)swfupload占位符和一個(gè)上傳按鈕。占位符用于當(dāng)swfupload載入并初始化后被swfupload按鈕替換的一個(gè)dom元素。

<div?id="swfu-placeholder"><!–swfupload文件選擇按鈕占位符，執(zhí)行下面的js后，這里將被替換成swfupload上傳按鈕–></div>

• <div><input?type="button"?onclick="swfu.startUpload();"?value="上傳"?/></div>

接著，載入并初始化swfupload.swf。

var?swfuOption?=?{//swfupload選項(xiàng)

• ? ??upload_url?:?"http://labs.goodje",?//接收上傳的服務(wù)端url
• ? ??flash_url?:?"http://labs.goodje",//swfupload壓縮包解壓后swfupload.swf的url
• ? ??button_placeholder_id?:?"swfu-placeholder",//上傳按鈕占位符的id
• ? ??file_size_limit?:?"20480",//用戶(hù)可以選擇的文件大小，有效的單位有B、KB、MB、GB，若無(wú)單位默認(rèn)為KB
• ? ??button_width:?200,?//按鈕寬度
• ? ??button_height:?20,?//按鈕高度
• ? ??button_text:?‘點(diǎn)我選擇文件‘//按鈕文字
• }
• var?swfu?=?new?SWFUpload(swfuOption);//初始化并將swfupload按鈕替換swfupload占位符

這樣，我們點(diǎn)擊“點(diǎn)我選擇文件”便可以上傳文件了，是不是so easy。[查看demo]

另外我們非常建議在開(kāi)發(fā)的過(guò)程中啟用debug模式，這個(gè)東西非常管用，在swfuOption中添加一個(gè)debug:true就可以了。

還有一點(diǎn)要特別注意：如果你的swfupload.swf域名和upload_url目錄不在同一個(gè)域名下，請(qǐng)?jiān)趗pload_url域名下的根目錄下創(chuàng)建一個(gè)crossdomain.xml文件，該文件主要是出于安全考慮的設(shè)計(jì)，目的是防止跨域的請(qǐng)求。該文件內(nèi)容請(qǐng)參考：Flex中實(shí)現(xiàn)跨域web service調(diào)用時(shí)crossdomain.xml的issue（中文），以及官方資料Adobe Cross Domain Policy FileSpecification（英文）

美化按鈕

現(xiàn)在swfupload按鈕是不是太丑了，用戶(hù)肯定不會(huì)喜歡的，就連能不能點(diǎn)我覺(jué)得用戶(hù)都會(huì)這么想。好吧，那現(xiàn)在我們來(lái)美化它把。

一. 加上背景圖片。

按鈕分別有四種狀態(tài)：1. 正常情況 2. 鼠標(biāo)經(jīng)過(guò) 3. 鼠標(biāo)按下 4. 按鈕被禁用。

知道了這四種狀態(tài)我們就可以開(kāi)始制作圖片了，圖片寬度為按鈕的寬度，高度為按鈕高度的四倍，四種狀態(tài)的背景圖片分別從上至下排列，中間沒(méi)有縫隙，最終效果可以是這個(gè)樣子。

var?swfuOption?=?{//swfupload選項(xiàng)

• ? ??upload_url?:?"http://labs.goodje",?//接收上傳的服務(wù)端url
• ? ??flash_url?:?"http://labs.goodje",//swfupload壓縮包解壓后swfupload.swf的url
• ? ??button_placeholder_id?:?"swfu-placeholder",//上傳按鈕占位符的id
• ? ??file_size_limit?:?"20480",//用戶(hù)可以選擇的文件大小，有效的單位有B、KB、MB、GB，若無(wú)單位默認(rèn)為KB
• ? ??button_width:?215,?//按鈕寬度
• ? ??button_height:?45,?//按鈕高度
• ? ??button_text:?‘點(diǎn)我選擇文件‘,//按鈕文字
• ? ??button_image_url:?"http://labs.goodje",//按鈕背景圖片路徑
• ? ??debug:true
• }
• var?swfu?=?new?SWFUpload(swfuOption);

這里修改了button_width，button_height并且新增了button_image_url參數(shù)。

二. 優(yōu)化按鈕文字

swfupload有個(gè)好處就是可以將背景圖片和文字分離，這個(gè)做的比較好，要是換文字不要找設(shè)計(jì)來(lái)弄，直接改代碼就行了，另外，文字支持html標(biāo) 簽，css控制樣式，可以用來(lái)修改文字的字體顏色和大小，但是很坑爹的一點(diǎn)就是支持的html和css都不全，無(wú)法將文字劇中顯示，這個(gè)太tm坑爹了。不 過(guò)好在swf選項(xiàng)提供了button_text_top_padding和button_text_left_padding選項(xiàng)，可以用來(lái)控制文字離按鈕頂部和左邊的距離，灰常蛋疼，因?yàn)榫退隳氵@次調(diào)好了，下次增加或刪除了文字、修改了文字大小后都需要再調(diào)，調(diào)好后效果如下。

再附上代碼：

var?swfuOption?=?{//swfupload選項(xiàng)

• ? ??upload_url?:?"http://labs.goodje",?//接收上傳的服務(wù)端url
• ? ??flash_url?:?"http://labs.goodje",//swfupload壓縮包解壓后swfupload.swf的url
• ? ??button_placeholder_id?:?"swfu-placeholder",//上傳按鈕占位符的id
• ? ??file_size_limit?:?"20480",//用戶(hù)可以選擇的文件大小，有效的單位有B、KB、MB、GB，若無(wú)單位默認(rèn)為KB
• ? ??button_width:?215,?//按鈕寬度
• ? ??button_height:?45,?//按鈕高度
• ? ??button_text:?‘<span class="btn-txt">選擇文件</span>‘,//按鈕文字
• ? ??button_text_style:?‘.btn-txt{color: #666666;font-size:20px;font-family:"微軟雅黑"}‘,
• ? ??button_text_top_padding:?6,
• ? ??button_text_left_padding:?65,
• ? ??button_image_url:?"http://labs.goodje",//按鈕背景圖片路徑
• ? ??debug:true
• }
• var?swfu?=?new?SWFUpload(swfuOption);

這里分別修改了button_text，新增了button_text_style，button_text_top_padding以及button_text_left_padding。

高級(jí)應(yīng)用

一. 事件

這里，所謂的事件就是因用戶(hù)或計(jì)算機(jī)自動(dòng)操作過(guò)程中產(chǎn)生的一些結(jié)果。

swfupload中包含很多事件，如用戶(hù)點(diǎn)擊“選擇文件”按鈕，文件選擇框彈出前會(huì)觸發(fā)fileDialogStart事件；用戶(hù)點(diǎn)擊上傳按鈕，swfupload響應(yīng)并在上傳前會(huì)觸發(fā)uploadStart事件；文件上傳過(guò)程中會(huì)不停的觸發(fā)uploadProgress事件等等。

官方的解釋：

SWFUpload在操作過(guò)程中會(huì)觸發(fā)一系列事件，開(kāi)發(fā)者可以利用這些回調(diào)的處理事件來(lái)控制UI，控制操作或者報(bào)告錯(cuò)誤。

所有的事件都是在SWFUpload實(shí)例的上下文中調(diào)用的，因此在這些回調(diào)的事件中使用this能夠直接訪問(wèn)到該觸發(fā)該事件的實(shí)例對(duì)象。

所有事件應(yīng)該在實(shí)例初始化時(shí)setting參數(shù)中預(yù)設(shè)完成。[詳細(xì)事件列表]

二. 偵聽(tīng)事件

在swfupload初始化時(shí)，我們就必須偵聽(tīng)我們想偵聽(tīng)的事件，當(dāng)然如果不偵聽(tīng)也不會(huì)出錯(cuò)，swfupload不做任何操作。

比如我們我們有這樣的需求

• 用戶(hù)選擇文件后自動(dòng)上傳，打開(kāi)文件選擇窗口后若未選擇文件則不操作
• 動(dòng)態(tài)顯示上傳進(jìn)度
• 上傳完成后提示文件上傳是否成功
• 增加“停止上傳”按鈕，用于在上傳過(guò)程中停止上傳，并將上傳的文件回歸到上傳隊(duì)列中
• 文件上傳過(guò)程中禁用“選擇文件”按鈕，文件上傳完成或者中途取消上傳恢復(fù)“選擇文件”按鈕

用戶(hù)選擇文件后自動(dòng)上傳需要偵聽(tīng)fileDialogComplete事件。我們要先定義一個(gè)函數(shù)：

function?fileDialogComplete(selectedNum,?queuedNum)?{

• ? ??if?(queuedNum?&gt;?0)?{//選擇并添加到上傳隊(duì)列的文件數(shù)大于0
• ? ? ? ??this.startUpload();//開(kāi)始上傳
• ? ? ? ??this.setButtonDisabled(true);//禁用上傳按鈕
• ? ??}
• }
• ?
• //并在選項(xiàng)參數(shù)中加上該參數(shù)
• file_dialog_complete_handler:?fileDialogComplete

該函數(shù)用于偵聽(tīng)文件選擇對(duì)話框關(guān)閉的事件，如果用戶(hù)選擇并且成功加入上傳隊(duì)列的文件數(shù)大于0即立即開(kāi)始上傳，另外禁用上傳按鈕，以防出錯(cuò)。

動(dòng)態(tài)顯示上傳進(jìn)度需要偵聽(tīng)uploadProgress事件，另外我們還要在html中插入一個(gè)div用于顯示上傳進(jìn)度。

var?statusE?=?document.getElementById(‘swfu-upload-status‘);//文件上傳進(jìn)度節(jié)點(diǎn)

• function?uploadProgress(file,?curBytes,?totalBytes)?{
• ? ??statusE.innerHTML?=?['文件名：',?file.name,?'
• 總尺寸：',?totalBytes,?'B
• 已上傳：',?curBytes,?'B
• 進(jìn)度：',?parseInt((curBytes/totalBytes)*100), '%'].join(”);
• }
• ?
• //并且在選項(xiàng)參數(shù)中加上該參數(shù)
• upload_progress_handler: uploadProgress

uploadProgress事件被觸發(fā)后執(zhí)行uploadProgress函數(shù)，并且給該函數(shù)傳遞三個(gè)參數(shù)，分別是當(dāng)前上傳的文件對(duì)象，當(dāng)前以上傳大小（單位：字節(jié)），當(dāng)前上傳的文件總大小（單位：字節(jié)）。

上傳完成后提示文件上傳是否成功需要至少偵聽(tīng)兩個(gè)事件uploadError上傳出錯(cuò)以及uploadSuccess上傳成功，并建議偵聽(tīng)額外的一個(gè)uploadComplete事件，無(wú)論上傳成功或者失敗都會(huì)被觸發(fā)。代碼如下：

//上傳過(guò)程中出錯(cuò)

• function?uploadError(file,?errCode,?msg)?{
• ? ??statusE.innerHTML?+=?['
• 文件[',?file.name,?']上傳出錯(cuò)，出錯(cuò)代碼：[',?errCode,?']，出錯(cuò)原因：‘,?msg].join(”);
• }
• ?
• //上傳成功
• function?uploadSuccess(file,?data)?{
• ? ??statusE.innerHTML?+=?['
• 文件[',?file.name,?']上傳成功，服務(wù)器返回信息：‘,?data].join(”);
• }
• ?
• //上傳完成，無(wú)論上傳過(guò)程中出錯(cuò)還是上傳成功，都會(huì)觸發(fā)該事件，并且在那兩個(gè)事件后被觸發(fā)
• function?uploadComplete(file)?{
• ? ??statusE.innerHTML?+=?['
• 文件[',?file.name,?']結(jié)束上傳‘].join(”);
• ? ??this.setButtonDisabled(false);//恢復(fù)上傳按鈕
• }
• ?
• //并且在選項(xiàng)參數(shù)中加上該參數(shù)
• upload_error_handler:?uploadError,//文件上傳出錯(cuò)
• upload_success_handler:?uploadSuccess,//文件上傳成功
• upload_complete_handler:?uploadComplete//文件上傳完成，在upload_error_handler或者upload_success_handler之后觸發(fā)

uploadError函數(shù)的三個(gè)參數(shù)分別為：文件對(duì)象，出錯(cuò)代碼以及出錯(cuò)明文信息。

uploadSuccess函數(shù)的兩個(gè)參數(shù)分別為文件對(duì)象，服務(wù)器返回的信息。服務(wù)器返回的信息，實(shí)在是太大了，比如上傳一張圖片，經(jīng)過(guò)服務(wù)器處理后需要返回在服務(wù)器上存儲(chǔ)的url，然后供顯示顯示，等等。

uploadComplete函數(shù)只有一個(gè)參數(shù)，即文件對(duì)象。

但是，這里在windows上有一個(gè)bug，官方如此解釋：

在window平臺(tái)下，那么服務(wù)端的處理程序在處理完文件存儲(chǔ)以后，必須返回一個(gè)非空值，否則uploadError/uploadSuccess事件都不會(huì)被觸發(fā)，隨后的uploadComplete事件也無(wú)法觸發(fā)。

另外文件上傳過(guò)程中禁用“選擇文件”按鈕，文件上傳完成或者中途取消上傳恢復(fù)“選擇文件”按鈕這個(gè)需求，其實(shí)已經(jīng)完成了，分別在fileDialogComplete事件中開(kāi)始上傳之前禁用按鈕，以及uploadComplete事件中恢復(fù)按鈕。

細(xì)心的同學(xué)，可能已經(jīng)發(fā)現(xiàn)了，我們這里只是講解了單個(gè)文件的上傳，并沒(méi)有利用到swfupload利器的一大王牌功能——多文件上傳，這個(gè)會(huì)在下一節(jié)更多參數(shù)中提到。

另外幾個(gè)沒(méi)有提到的幾個(gè)事件也大同小異，這里我建議大件看文檔（中文），師傅帶進(jìn)門(mén)，修行靠個(gè)人嘛，況且swfupload也不是個(gè)很復(fù)雜的東東。

更多參數(shù)

這里只提幾個(gè)額外經(jīng)常會(huì)用到的，一些邊邊角角的大家可以選擇去看漢化官方文檔。

Filedata，類(lèi)似于表單上傳控件的name屬性，默認(rèn)值為Filedata。這里不建議修改，因?yàn)樵趌inux下的flash，無(wú)論怎么修改這個(gè)值，都沒(méi)有效果。

post_params， post值。連同上傳的文件一起提交到服務(wù)器上，這個(gè)東東也是比較有用的，比如可以驗(yàn)證用戶(hù)是否允許上傳文件等，另外可以用swfupload的 addPostParam/setPostParams/removePostParam/addFileParam/removeFileParam方 法修改該值，通常在上傳文件額外還需要提交表單信息的時(shí)候會(huì)特別管用。

requeue_on_error, 是否將上傳失敗的的文件重新添加到上傳隊(duì)列的頂端，默認(rèn)值為true。當(dāng)文件上傳失敗或者停止上傳觸發(fā)uploadError事件，是否將上傳失敗的的文 件重新添加到上傳隊(duì)列的頂端，當(dāng)然調(diào)用cancelUpload方法觸發(fā)uploadError事件，不會(huì)將文件重新添加到上傳隊(duì)列中，而是會(huì)丟棄。

file_types，限制上傳的文件類(lèi)型，這個(gè)是非常有用且重要的，默 認(rèn)值為*.*。另外當(dāng)用戶(hù)指向上傳圖片時(shí)可以設(shè)置為”*.jpg;*.jpeg;*.gif;*.png;*.bmp;”。另外有一點(diǎn)非常重要的就是，這 里只是瀏覽器端限制了上傳的文件類(lèi)型，服務(wù)端依然要驗(yàn)證上傳的文件類(lèi)型，否則可能是很危險(xiǎn)的。

file_upload_limit，允許同時(shí)上傳文件的數(shù)量，默認(rèn)值為0，即不限制。當(dāng)文件隊(duì)列中的文件數(shù)，正在上傳的文件以及已經(jīng)上傳成功的文件數(shù)只和超過(guò)了該值后，便不在允許添加文件。

file_queue_limit，允許隊(duì)列存在的文件數(shù)量，默認(rèn)值為0，即不限制。當(dāng)文件隊(duì)列中的文件數(shù)超過(guò)該值便不再允許添加文件。

button_action，點(diǎn)擊swfupload按鈕執(zhí)行的動(dòng)作，默認(rèn)值為SWFUpload.BUTTON_ACTION.SELECT_FILES（多文件上傳）。

官方如是說(shuō)：
button_action (v2.2.0新增) 設(shè)置Flash Button點(diǎn)擊以后的動(dòng)作。默認(rèn)為SWFUpload.BUTTON_ACTION.SELECT_FILES，點(diǎn)擊按鈕將會(huì)打開(kāi)多文件上傳的對(duì)話框。 如果設(shè)置為SWFUpload.BUTTON_ACTION.SELECT_FILE，則為單文件上傳。如果設(shè)置為 SWFUpload.BUTTON_ACTION.START_UPLOAD，則啟動(dòng)文件上傳。

button_disabled，按鈕是否禁用，默認(rèn)值為false。

button_cursor，鼠標(biāo)經(jīng)過(guò)時(shí)的鼠標(biāo)形狀，默認(rèn)值為SWFUpload.CURSOR.ARROW(箭頭光標(biāo))。另外還有SWFUpload.CURSOR.HAND（手型），這里我非常建議設(shè)置為體驗(yàn)更好的SWFUpload.CURSOR.HAND，因?yàn)槲矣X(jué)得盡頭光標(biāo)很硬，不和善。

custom_settings，一些自定義的信息，默認(rèn)值為一個(gè)空對(duì)象{}。這個(gè)沒(méi)什么好說(shuō)的，主要作用為存儲(chǔ)一些和swfupload有關(guān)的信息，而且防止與其它變量或者函數(shù)重名。

custom_settings:?{‘name‘:‘zhangshan‘,‘age‘:15}

• ?
• alert(swfu.customSettings['name']);
• alert(swfu.customSettings.age);

插件

插件不想多說(shuō)，以Cookies插件為例講一個(gè)。

這個(gè)插件主要目的為解決IE下的一個(gè)bug，flash不能將瀏覽器的cookie提交到服務(wù)器。

以至于服務(wù)端不能驗(yàn)證用戶(hù)的登陸態(tài)，而在以插件形式允許的flash在FF或者chrome下就沒(méi)有該問(wèn)題。該插件的原理為使用js獲取瀏覽器 cookie，存放到請(qǐng)求的post數(shù)據(jù)中一起提交給服務(wù)器。這里需要注意的一點(diǎn)是，用戶(hù)提交的post數(shù)據(jù)如果和cookie中某個(gè)數(shù)據(jù)重名會(huì)將覆蓋掉 cookie的值。

用法:

在head中載入插件的js,就可以了

<script?src="plugins/swfupload.cookies.js"></script>

我們可以通過(guò)debug框看到cookie數(shù)據(jù)已經(jīng)存入到post_params中了。

是不是soeasy吧，還是那句話，師傅帶進(jìn)門(mén)，修行靠個(gè)人，swfupload帶給我們體驗(yàn)和可定制度都是非常高的，繼續(xù)享受把。

官方網(wǎng)站：http://www.swfupload.org/（英文）

官方例子：http://demo.swfupload.org/（英文）

SWFUpload v2.2.0.1 手冊(cè):?http://demo.swfupload.org/Documentation/（英文）

SWFUpload下載地址http://code.google本教程demo

轉(zhuǎn)載于:https://www.cnblogs.com/marksfly/p/4561153.html

總結(jié)

以上是生活随笔為你收集整理的文件上传利器SWFUpload入门简易教程的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。