因為噗浪朋友的一則訊息，讓我興起了想要整理一些關於 URLEncode 的問題，整理一下才發現每個語言都有不同的函式來處理關於 URLEncode 的問題。
先說為什麼需要作 URLEncode，RFC 3986規範了哪些字元是作為保留字（如：!、@、/、?等），如果URL中使用到了這些保留字，就必須將它編碼為「%HEXHEX」的形式，舉例來說，「空白字元」的 ASCII code 是32，所以會被編碼為 %20，而其它 non-ASCII 字元（如：中文字）則以 UTF-8 字元編碼後的位元組來編碼成 %HEXHEX 的形式。
如果有一個字串是：「This is my **書本**」，根據 RFC 3986 的定義，作完 URL encode 之後應該會變成「This%20is%20my%20%2A%2A%E6%9B%B8%E6%9C%AC%2A%2A」。
那什麼時候會需要對文字作 URL encode 呢？比方說，Facebook 提供了一個分享網頁到個人塗鴨牆（Wall）的作法，那就是將欲分享的網頁URL，比方說是 http://www.example.com/，只要將它作為參數（u傳給http://www.facebook.com/share.php就可以了，但你千萬不能寫成：
http://www.facebook.com/share.php?u=http://www.example.com/
，而是必須將它作 URL encode 之後，組合成：
http://www.facebook.com/share.php?u=http%3A%2F%2Fwww.example.com%2F
這樣才是正確的。
若是你在瀏覽器的網址列直接輸入前者也會正確，那是因為瀏覽器會幫你作了 url encode
。
不過，在 RFC 3986 之前，HTTP 也有為 GET/POST 在傳遞參數時的 url encode 方式作定義，基本上也是 encode 成 %HEXHEX 的形式，保留字跟 RFC 3986 的有部份出入，不過就沒有限定一定是 UTF-8 的文字編碼了，而且還有一個重點－－「空白字元」會被編碼成 + 而不是 %20。所以「This is a book」就會被編碼成「This+is+a+book」。
因為有這樣的差異，所以開發人員在使用函式庫的時候常常會搞混什麼時候該用／不該用什麼函式，以 PHP 來說就分為兩組函式：
urlencode / urldecode簡單地說就是以 HTTP 所使用的 application/x-www-form-urlencoded 的編碼規則，也就是會將空白字元編碼成 + 而不是%20。
rawurlencode / rawurldecode按照 RFC 3986 所定義的方式來作編碼。
Python 版本的話就是：
urllib.urlencode / urllib.urldecode會把空白字元編碼成 +
urllib.parse.urlencode 才會按照 RFC 3986 的方式來作編碼，若是 2.x 的版本就要另外處理或是找 3rd-party 資料庫來做。JavaScript 的 encodeURI 或是 encodeURIComponent （兩者僅相差一些保留字是否要作編碼，如 #）目前則是都使用 RFC 3986 的方式來作編碼，所以要作 application/x-www-form-urlencoded 的編碼時（AJAX POST），就要自己把 %20 替換成 + （jQuery 目前的程式碼就是這樣做的）
Java 的 java.net.URLEncoder.encode 這個 method 也是編碼成 application/x-www-form-urlencoded 的方式，如果要遵照 RFC 3986 的定義，則可以自行再把 + 替換成 %20 即可。
在PHP網站開發中，文件上傳功能時常用到，之前我已介紹過 如何利用PHP實現文件上傳功能 。 隨著WEB技術的發展，用戶體驗成為衡量網站成功與否的關鍵，今天和大家分享如何在PHP中利用Jquery實現Ajax方式文件上傳功能的例子，其中使用到了Jquery插件Ajaxupload，其可以實現單個文件和多文件上傳功能。
AjaxUpload
Jquery插件AjaxUpload實現文件上傳功能時無需創建form表單，即可實現Ajax方式的文件上傳，當然根據需要也可以創建form表單。
準備工作
1、下載 Jquery開發包 和文件上傳插件 AjaxUpload 。
2、創建uploadfile.html，並引入Jquery開發包和AjaxUpload插件
1 2 | < script src = "js/jquery-1.3.js" ></ script > < script src = "js/ajaxupload.3.5.js" ></ script > |
3、根據Jquery插件AjaxUpload的需要，創建一個觸發Ajax文件上傳功能的DIV
1 2 3 4 5 6 | < ul > < li id = "example" > < div id = "upload_button" > 文件上傳 < / div > < p > 已上傳的文件列表: < / p > < ol class = "files" >< / ol > < / ul > |
註釋 ：由下面的代碼我們可以看到Jquery插件AjaxUpload是根據upload_button這個DIV觸發文件上傳功能。
前台JS代碼
在代碼中我設置了開關，根據需要可以匹配上傳文件類型，同時也可以設置是以Ajax方式實現單個文件上傳還是多個文件上傳。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 | $ ( document ) . ready ( function ( ) { var button = $ ( '#upload_button' ) , interval ; var fileType = "all" , fileNum = "one" ; new AjaxUpload ( button , { action : 'do/uploadfile.php' , /*data:{ 'buttoninfo':button.text() },*/ name : 'userfile' , onSubmit : function ( file , ext ) { if ( fileType == "pic" ) { if ( ext && /^(jpg|png|jpeg|gif)$/ . test ( ext ) ) { this . setData ( { 'info' : '文件類型為圖片' } ) ; } else { $ ( '<li></li>' ) . appendTo ( '#example .files' ) . text ( '非圖片類型文件，請重傳' ) ; return false ; } } button. text ( '文件上傳中' ) ; if ( fileNum == 'one' ) this . disable ( ) ; interval = window. setInterval ( function ( ) { var text = button. text ( ) ; if ( text. length < 14 ) { button. text ( text + '.' ) ; } else { button. text ( '文件上傳中' ) ; } } , 200 ) ; } , onComplete : function ( file , response ) { if ( response != "success" ) alert ( response ) ; button. text ( '文件上傳' ) ; window. clearInterval ( interval ) ; this . enable ( ) ; if ( response == "success" ) ; $ ( '<li></li>' ) . appendTo ( '#example .files' ) . text ( file ) ; } } ) ; } ) ; |
註釋 ：
第1行：$(document).ready()函數，Jquery中的函數，類似於window.load，使用這個函數可在DOM載入就緒能夠讀取並操縱時立即調用綁定的函數。
第3行：fileType和fileNum參數代表上傳文件的類型和數量，默認值為可上傳所有類型文件，同一時間只能上傳一個文件，如想上傳圖片文件或同時上傳多個文件，可將這兩個變量值變為pic和more。
第6~8行：POST到服務器的數據，你可以設置靜態值也可以通過Jquery的DOM操作函數獲得一些動態值，比如form表單中INPUT的值等。
第9行：等同於前端
服務器端$_FILES['userfile']
第10~36行：文件上傳前觸發的功能。
第11~21行：圖片文件類型的過濾功能，Jquery setData函數用來設置POST至服務器端的值。
第25~26行：設置同時只上傳一個文件還是多個文件，如果只上傳一個文件，則將觸發按鈕禁掉。 如果要多傳輸幾個文件，請在服務器端PHP文件上傳程序中設置MAXSIZE的值，當然上傳文件的大小限制同時和PHP.INI文件中的設置也有關。
第28~35行：在文件上傳過程中每隔200毫秒動態更新一次按鈕的文字，已實現動態提示的效果。window.setInterval函數用來每隔指定的時間就執行一次內置的函數，交互時間單位為豪秒。
第37~49行：文件上傳功能完成後觸發的功能，根據返回值如果服務器端報錯，則前端通過ALERT方式提示出錯信息。
服務器端PHP文件上傳代碼
大體上是根據之前介紹的 PHP文件上傳功能代碼實例教程 改編，涉及到的文件上傳大小的設置，出錯信息等說明都已在此文中詳細說明。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | $upload_dir = '../file/' ; $file_path = $upload_dir . $_FILES [ 'userfile' ] [ 'name' ] ; $MAX_SIZE = 20000000 ; echo $_POST [ 'buttoninfo' ] ; if ( ! is_dir ( $upload_dir ) ) { if ( ! mkdir ( $upload_dir ) ) echo "文件上傳目錄不存在並且無法創建文件上傳目錄" ; if ( ! chmod ( $upload_dir , 0755 ) ) echo "文件上傳目錄的權限無法設定為可讀可寫" ; } if ( $_FILES [ 'userfile' ] [ 'size' ] > $MAX_SIZE ) echo "上傳的文件大小超過了規定大小" ; if ( $_FILES [ 'userfile' ] [ 'size' ] == 0 ) echo "請選擇上傳的文件" ; if ( ! move_uploaded_file ( $_FILES [ 'userfile' ] [ 'tmp_name' ] , $file_path ) ) echo "複製文件失敗，請重新上傳" ; switch ( $_FILES [ 'userfile' ] [ 'error' ] ) { case 0 : echo "success" ; break ; case 1 : echo "上傳的文件超過了php.ini中upload_max_filesize選項限制的值" ; break ; case 2 : echo "上傳文件的大小超過了HTML表單中MAX_FILE_SIZE選項指定的值" ; break ; case 3 : echo "文件只有部分被上傳" ; break ; case 4 : echo "沒有文件被上傳" ; break ; } |
總結
基本上前端Ajax文件上傳觸發功能和服務器端PHP文件上傳功能的原型就介紹完畢了，你可以根據自身需要對前後端代碼進行補充，也可以將一些功能獨立出來，比如文件類型、單個文件或者多文件上傳功能。 總的來說Jquery插件AjaxUpload實現文件上傳功能的應用還是比較容易的。
注 ： PHP網站開發教程-leapsoul.cn 版權所有，轉載時請以鏈接形式註明原始出處及本聲明，謝謝。