Saturday, July 31, 2010

Javascript XMLHttpRequest 模擬 multipart/form-data 傳送資料

multipart/form-data是一種瀏覽器用來發送Form資料的方法,特別的是,它支援binary code的檔案傳輸

今天試著要用XMLHttpRequest來來模擬multipart/form-data發送資料(因為要上傳檔案)

今天找很久的資料後,決定還是用Wireshark來捕捉一下封包,看看到底是如何運作的
搭配 RFC1867  成功的進行了模擬,上傳資料

 XMLHttpRequest open後,必須先設置header,告訴伺服器你是multipart/form-data

http.setRequestHeader("Content-Type","multipart/form-data; boundary=----1AwOmRxb2KluSNh90S1qesEo")

multipart/form-data; 告訴伺服以multipart/form-data傳送資料
boundary=----1AwOmRxb2KluSNh90S1qesEo 則定義boundary,用來當作分隔字串用的(每個資料都以boundary=XXX 後面那串分隔)

接著設定要傳送的資料

var param=""; 
param+='------1AwOmRxb2KluSNh90S1qesEo\r\n';
param+='Content-Disposition: form-data; name="filedata"\r\n';
param+='\r\n';
param+=data+'\r\n';
param+="------1AwOmRxb2KluSNh90S1qesEo--\r\n"


資料以分隔字串開頭(之後分隔字串前面都加上兩個--,原因還不清楚),用\r\n進行換行(很重要)

接著用Content-Disposition: form-data; name="filedata"\r\n定義欄位名稱
再接一個\r\n後
下一行為你要發為你要發送的欄位資料,後面還是得接\r\n

就這樣一組一組定義欄位跟資料(每組前面記得要有一個前面加--的分隔字串)

最後定義完後,以------1AwOmRxb2KluSNh90S1qesEo--\r\n結尾 
基本上是 -- + 分隔字串 + -- + \r\n

最後用XMLHttpRequest的send方法發送param出去即可

No comments:

Post a Comment