文件上传利器SWFUpload入门简易教程
凡做過網站開發的都應該知道表單file的確雞肋。
Ajax解決了不刷新頁面提交表單，但是卻沒有解決文件上傳不刷新頁面，當然也有其它技術讓不刷新頁面而提交文件，該技術主要是利用隱藏的iFrame， 較Ajax要麻煩許多，而且其提交方式依然在底層是使用的表單file，這里我們不詳談。而且如果是提交較小的文件，我們能接受，如果提交的文件較大，我 們便要忍受很長的等待時間，而瀏覽器卻沒有任何提示，我們也沒有辦法知道文件上傳的進度…
但是現在，網上出現了一個名為SWFUpload的上傳組件，該組件利用Flash自身的文件提交技術而無需刷新頁面，而且能夠獲取文件上傳進度，可以提交多個文件，而且還能控制上傳文件的大小，類型等信息。這么一個強大而易用的東西，你還在尋找么？
下面就是是SWFUupload的簡易教程，服務端大同小異，我這里以php為例。（該教程基于SWFUpload2.2.0.1，雖然 SWFUpload v2.5.0 Beta 3已經放出，但是考慮到是測試版，肯定用不穩定的因素，我決定將穩定的2.2.0.1作為本次學習的版本）。
下載SWFUpload
下載地址：swfupload.googlecode 下載完后解壓到某個目錄，我這里放在labs.goodje 自需要保留目錄下的swfupload.js,Flash/swfupload.swf兩個文件和plugins目錄,其它的都可以刪掉。
- swfupload.js:?swfupload的js腳本，封裝swfupload.swf的各種接口供js調用，簡化操作。
- swfupload.swf:?swfupload的核心所在，上傳多個文件，提供上傳進度，限制文件容量尺寸等提優于于上傳表單功能的工具，實質是一個flash。
- plugins目錄:?swfupload的各種插件。其中swfupload.cookies.js用于解決ie中flash請求服務器時，請求頭中不帶cookie的bug。swfupload.queue.js插件提供更強大的上傳隊列功能，比如說取消隊列等等。?swfupload.speed.js插件提供上傳速度，上傳剩余時間，以上傳事件等信息。?swfupload.swfobject.js插件集成了swfobject庫，用于將swfupload組件嵌入到dom中，而且新增了一個swfupload組件正在載入的事件。
快速入門
?新增一個上傳頁面，我們放在swfu下，但不一定非要放在swfu下，命名為tutor-1.html。
?head中插入用于引入swfupload.js的代碼
<script?src="swfupload.js"></script>然我我們還需要一個swfupload占位符和一個上傳按鈕。占位符用于當swfupload載入并初始化后被swfupload按鈕替換的一個dom元素。
<div?id="swfu-placeholder"><!–swfupload文件選擇按鈕占位符，執行下面的js后，這里將被替換成swfupload上傳按鈕–></div>- <div><input?type="button"?onclick="swfu.startUpload();"?value="上傳"?/></div>
接著，載入并初始化swfupload.swf。
var?swfuOption?=?{//swfupload選項- ? ??upload_url?:?"http://labs.goodje",?//接收上傳的服務端url
- ? ??flash_url?:?"http://labs.goodje",//swfupload壓縮包解壓后swfupload.swf的url
- ? ??button_placeholder_id?:?"swfu-placeholder",//上傳按鈕占位符的id
- ? ??file_size_limit?:?"20480",//用戶可以選擇的文件大小，有效的單位有B、KB、MB、GB，若無單位默認為KB
- ? ??button_width:?200,?//按鈕寬度
- ? ??button_height:?20,?//按鈕高度
- ? ??button_text:?‘點我選擇文件‘//按鈕文字
- }
- var?swfu?=?new?SWFUpload(swfuOption);//初始化并將swfupload按鈕替換swfupload占位符
這樣，我們點擊“點我選擇文件”便可以上傳文件了，是不是so easy。[查看demo]
另外我們非常建議在開發的過程中啟用debug模式，這個東西非常管用，在swfuOption中添加一個debug:true就可以了。
還有一點要特別注意：如果你的swfupload.swf域名和upload_url目錄不在同一個域名下，請在upload_url域名下的根目錄下創建一個crossdomain.xml文件，該文件主要是出于安全考慮的設計，目的是防止跨域的請求。該文件內容請參考：Flex中實現跨域web service調用時crossdomain.xml的issue（中文），以及官方資料Adobe Cross Domain Policy FileSpecification（英文）
美化按鈕
現在swfupload按鈕是不是太丑了，用戶肯定不會喜歡的，就連能不能點我覺得用戶都會這么想。好吧，那現在我們來美化它把。
一. 加上背景圖片。
按鈕分別有四種狀態：1. 正常情況 2. 鼠標經過 3. 鼠標按下 4. 按鈕被禁用。
知道了這四種狀態我們就可以開始制作圖片了，圖片寬度為按鈕的寬度，高度為按鈕高度的四倍，四種狀態的背景圖片分別從上至下排列，中間沒有縫隙，最終效果可以是這個樣子。
var?swfuOption?=?{//swfupload選項- ? ??upload_url?:?"http://labs.goodje",?//接收上傳的服務端url
- ? ??flash_url?:?"http://labs.goodje",//swfupload壓縮包解壓后swfupload.swf的url
- ? ??button_placeholder_id?:?"swfu-placeholder",//上傳按鈕占位符的id
- ? ??file_size_limit?:?"20480",//用戶可以選擇的文件大小，有效的單位有B、KB、MB、GB，若無單位默認為KB
- ? ??button_width:?215,?//按鈕寬度
- ? ??button_height:?45,?//按鈕高度
- ? ??button_text:?‘點我選擇文件‘,//按鈕文字
- ? ??button_image_url:?"http://labs.goodje",//按鈕背景圖片路徑
- ? ??debug:true
- }
- var?swfu?=?new?SWFUpload(swfuOption);
這里修改了button_width，button_height并且新增了button_image_url參數。
二. 優化按鈕文字
swfupload有個好處就是可以將背景圖片和文字分離，這個做的比較好，要是換文字不要找設計來弄，直接改代碼就行了，另外，文字支持html標 簽，css控制樣式，可以用來修改文字的字體顏色和大小，但是很坑爹的一點就是支持的html和css都不全，無法將文字劇中顯示，這個太tm坑爹了。不 過好在swf選項提供了button_text_top_padding和button_text_left_padding選項，可以用來控制文字離按鈕頂部和左邊的距離，灰常蛋疼，因為就算你這次調好了，下次增加或刪除了文字、修改了文字大小后都需要再調，調好后效果如下。
再附上代碼：
var?swfuOption?=?{//swfupload選項- ? ??upload_url?:?"http://labs.goodje",?//接收上傳的服務端url
- ? ??flash_url?:?"http://labs.goodje",//swfupload壓縮包解壓后swfupload.swf的url
- ? ??button_placeholder_id?:?"swfu-placeholder",//上傳按鈕占位符的id
- ? ??file_size_limit?:?"20480",//用戶可以選擇的文件大小，有效的單位有B、KB、MB、GB，若無單位默認為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。
高級應用
一. 事件
這里，所謂的事件就是因用戶或計算機自動操作過程中產生的一些結果。
swfupload中包含很多事件，如用戶點擊“選擇文件”按鈕，文件選擇框彈出前會觸發fileDialogStart事件；用戶點擊上傳按鈕，swfupload響應并在上傳前會觸發uploadStart事件；文件上傳過程中會不停的觸發uploadProgress事件等等。
官方的解釋：
SWFUpload在操作過程中會觸發一系列事件，開發者可以利用這些回調的處理事件來控制UI，控制操作或者報告錯誤。
所有的事件都是在SWFUpload實例的上下文中調用的，因此在這些回調的事件中使用this能夠直接訪問到該觸發該事件的實例對象。
所有事件應該在實例初始化時setting參數中預設完成。[詳細事件列表]
二. 偵聽事件
在swfupload初始化時，我們就必須偵聽我們想偵聽的事件，當然如果不偵聽也不會出錯，swfupload不做任何操作。
比如我們我們有這樣的需求
- 用戶選擇文件后自動上傳，打開文件選擇窗口后若未選擇文件則不操作
- 動態顯示上傳進度
- 上傳完成后提示文件上傳是否成功
- 增加“停止上傳”按鈕，用于在上傳過程中停止上傳，并將上傳的文件回歸到上傳隊列中
- 文件上傳過程中禁用“選擇文件”按鈕，文件上傳完成或者中途取消上傳恢復“選擇文件”按鈕
用戶選擇文件后自動上傳需要偵聽fileDialogComplete事件。我們要先定義一個函數：
function?fileDialogComplete(selectedNum,?queuedNum)?{- ? ??if?(queuedNum?>?0)?{//選擇并添加到上傳隊列的文件數大于0
- ? ? ? ??this.startUpload();//開始上傳
- ? ? ? ??this.setButtonDisabled(true);//禁用上傳按鈕
- ? ??}
- }
- ?
- //并在選項參數中加上該參數
- file_dialog_complete_handler:?fileDialogComplete
該函數用于偵聽文件選擇對話框關閉的事件，如果用戶選擇并且成功加入上傳隊列的文件數大于0即立即開始上傳，另外禁用上傳按鈕，以防出錯。
動態顯示上傳進度需要偵聽uploadProgress事件，另外我們還要在html中插入一個div用于顯示上傳進度。
var?statusE?=?document.getElementById(‘swfu-upload-status‘);//文件上傳進度節點- function?uploadProgress(file,?curBytes,?totalBytes)?{
- ? ??statusE.innerHTML?=?['文件名：',?file.name,?'
- 總尺寸：',?totalBytes,?'B
- 已上傳：',?curBytes,?'B
- 進度：',?parseInt((curBytes/totalBytes)*100), '%'].join(”);
- }
- ?
- //并且在選項參數中加上該參數
- upload_progress_handler: uploadProgress
uploadProgress事件被觸發后執行uploadProgress函數，并且給該函數傳遞三個參數，分別是當前上傳的文件對象，當前以上傳大小（單位：字節），當前上傳的文件總大小（單位：字節）。
上傳完成后提示文件上傳是否成功需要至少偵聽兩個事件uploadError上傳出錯以及uploadSuccess上傳成功，并建議偵聽額外的一個uploadComplete事件，無論上傳成功或者失敗都會被觸發。代碼如下：
//上傳過程中出錯- function?uploadError(file,?errCode,?msg)?{
- ? ??statusE.innerHTML?+=?['
- 文件[',?file.name,?']上傳出錯，出錯代碼：[',?errCode,?']，出錯原因：‘,?msg].join(”);
- }
- ?
- //上傳成功
- function?uploadSuccess(file,?data)?{
- ? ??statusE.innerHTML?+=?['
- 文件[',?file.name,?']上傳成功，服務器返回信息：‘,?data].join(”);
- }
- ?
- //上傳完成，無論上傳過程中出錯還是上傳成功，都會觸發該事件，并且在那兩個事件后被觸發
- function?uploadComplete(file)?{
- ? ??statusE.innerHTML?+=?['
- 文件[',?file.name,?']結束上傳‘].join(”);
- ? ??this.setButtonDisabled(false);//恢復上傳按鈕
- }
- ?
- //并且在選項參數中加上該參數
- upload_error_handler:?uploadError,//文件上傳出錯
- upload_success_handler:?uploadSuccess,//文件上傳成功
- upload_complete_handler:?uploadComplete//文件上傳完成，在upload_error_handler或者upload_success_handler之后觸發
uploadError函數的三個參數分別為：文件對象，出錯代碼以及出錯明文信息。
uploadSuccess函數的兩個參數分別為文件對象，服務器返回的信息。服務器返回的信息，實在是太大了，比如上傳一張圖片，經過服務器處理后需要返回在服務器上存儲的url，然后供顯示顯示，等等。
uploadComplete函數只有一個參數，即文件對象。
但是，這里在windows上有一個bug，官方如此解釋：
在window平臺下，那么服務端的處理程序在處理完文件存儲以后，必須返回一個非空值，否則uploadError/uploadSuccess事件都不會被觸發，隨后的uploadComplete事件也無法觸發。
另外文件上傳過程中禁用“選擇文件”按鈕，文件上傳完成或者中途取消上傳恢復“選擇文件”按鈕這個需求，其實已經完成了，分別在fileDialogComplete事件中開始上傳之前禁用按鈕，以及uploadComplete事件中恢復按鈕。
細心的同學，可能已經發現了，我們這里只是講解了單個文件的上傳，并沒有利用到swfupload利器的一大王牌功能——多文件上傳，這個會在下一節更多參數中提到。
另外幾個沒有提到的幾個事件也大同小異，這里我建議大件看文檔（中文），師傅帶進門，修行靠個人嘛，況且swfupload也不是個很復雜的東東。
更多參數
這里只提幾個額外經常會用到的，一些邊邊角角的大家可以選擇去看漢化官方文檔。
Filedata，類似于表單上傳控件的name屬性，默認值為Filedata。這里不建議修改，因為在linux下的flash，無論怎么修改這個值，都沒有效果。
post_params， post值。連同上傳的文件一起提交到服務器上，這個東東也是比較有用的，比如可以驗證用戶是否允許上傳文件等，另外可以用swfupload的 addPostParam/setPostParams/removePostParam/addFileParam/removeFileParam方 法修改該值，通常在上傳文件額外還需要提交表單信息的時候會特別管用。
requeue_on_error, 是否將上傳失敗的的文件重新添加到上傳隊列的頂端，默認值為true。當文件上傳失敗或者停止上傳觸發uploadError事件，是否將上傳失敗的的文 件重新添加到上傳隊列的頂端，當然調用cancelUpload方法觸發uploadError事件，不會將文件重新添加到上傳隊列中，而是會丟棄。
file_types，限制上傳的文件類型，這個是非常有用且重要的，默 認值為*.*。另外當用戶指向上傳圖片時可以設置為”*.jpg;*.jpeg;*.gif;*.png;*.bmp;”。另外有一點非常重要的就是，這 里只是瀏覽器端限制了上傳的文件類型，服務端依然要驗證上傳的文件類型，否則可能是很危險的。
file_upload_limit，允許同時上傳文件的數量，默認值為0，即不限制。當文件隊列中的文件數，正在上傳的文件以及已經上傳成功的文件數只和超過了該值后，便不在允許添加文件。
file_queue_limit，允許隊列存在的文件數量，默認值為0，即不限制。當文件隊列中的文件數超過該值便不再允許添加文件。
button_action，點擊swfupload按鈕執行的動作，默認值為SWFUpload.BUTTON_ACTION.SELECT_FILES（多文件上傳）。
官方如是說：
button_action (v2.2.0新增) 設置Flash Button點擊以后的動作。默認為SWFUpload.BUTTON_ACTION.SELECT_FILES，點擊按鈕將會打開多文件上傳的對話框。 如果設置為SWFUpload.BUTTON_ACTION.SELECT_FILE，則為單文件上傳。如果設置為 SWFUpload.BUTTON_ACTION.START_UPLOAD，則啟動文件上傳。
button_disabled，按鈕是否禁用，默認值為false。
button_cursor，鼠標經過時的鼠標形狀，默認值為SWFUpload.CURSOR.ARROW(箭頭光標)。另外還有SWFUpload.CURSOR.HAND（手型），這里我非常建議設置為體驗更好的SWFUpload.CURSOR.HAND，因為我覺得盡頭光標很硬，不和善。
custom_settings，一些自定義的信息，默認值為一個空對象{}。這個沒什么好說的，主要作用為存儲一些和swfupload有關的信息，而且防止與其它變量或者函數重名。
custom_settings:?{‘name‘:‘zhangshan‘,‘age‘:15}- ?
- alert(swfu.customSettings['name']);
- alert(swfu.customSettings.age);
插件
插件不想多說，以Cookies插件為例講一個。
這個插件主要目的為解決IE下的一個bug，flash不能將瀏覽器的cookie提交到服務器。
以至于服務端不能驗證用戶的登陸態，而在以插件形式允許的flash在FF或者chrome下就沒有該問題。該插件的原理為使用js獲取瀏覽器 cookie，存放到請求的post數據中一起提交給服務器。這里需要注意的一點是，用戶提交的post數據如果和cookie中某個數據重名會將覆蓋掉 cookie的值。
用法:
在head中載入插件的js,就可以了
<script?src="plugins/swfupload.cookies.js"></script>我們可以通過debug框看到cookie數據已經存入到post_params中了。
是不是soeasy吧，還是那句話，師傅帶進門，修行靠個人，swfupload帶給我們體驗和可定制度都是非常高的，繼續享受把。
官方網站：http://www.swfupload.org/（英文）
官方例子：http://demo.swfupload.org/（英文）
SWFUpload v2.2.0.1 手冊:?http://demo.swfupload.org/Documentation/（英文）
SWFUpload下載地址http://code.google本教程demo
轉載于:https://www.cnblogs.com/marksfly/p/4561153.html
總結
以上是生活随笔為你收集整理的文件上传利器SWFUpload入门简易教程的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 移动平台作业——天气预报——天气数据的获
- 下一篇： HTML5前世今生