<form> multipart/form-data 上傳圖片
阿新 • • 發佈：2017-06-04
mbo tar nco 報錯 dial kit [] zip bbc 
1 <form method="post" enctype="multipart/form-data" id="fileinfo" name="fileinfo" > 2 <input class="input" type="file" name="file"></input> 3 </form> 4 <!--<button class="btn preview">預覽</button>--> 5html<button class="btn confirm">確定</button>
1 chatDialog.find(".btn.confirm").click(function() { 2 //chatDialog.find("form").submit(); 3 submitForm(); 4 bodyModal.hide(); 5 selectDialog.hide(); 6 }); 7 function submitForm() {javascript8 console.log("submit event"); 9 var fd = new FormData(document.getElementById("fileinfo")); 10 fd.append("token", token); 11 fd.append("talkerID",currentTalkerID); 12 fd.append("talkerIsUser",currentTalkerIsUser); 13 fd.append("fileType","image"); 14console.log(fd); 15 $.ajax({ 16 url: "/uploadFile", 17 type: "POST", 18 data: fd, 19 enctype: ‘multipart/form-data‘, 20 processData: false, // tell jQuery not to process the data 21 contentType: false// tell jQuery not to set contentType 22 }).done(function( data ) { 23 console.log("PHP Output:"); 24 console.log( data ); 25 }); 26 return false; 27 }
原文
原文是在<form>表單裏將用onsubmit="return submitForm();"把跳轉截了
但我手賤在form表單加了個enctype= ”multipart/form-data“
後端ParseMultipartForm時一直報錯：request Content-Type isn‘t multipart/form-data
抓了下包，出錯時包的Header，Form，MultipartForm內容如下
1 //Header 2 map[Accept-Language:[zh-CN,zh;q=0.8] Cookie:[io=oiuZ1YssLxHIpLGMAAAo; JSESSIONID=EEE6ACD5E7EA99F16DA6FADBF5AD191F; Jax.Q=1406100039|0NBAOSWM7E2QWLVWNF8SZHF5VLN2P4; _ga=GA1.1.1822669068.1495898591] Connection:[keep-alive] Content-Length:[9673] X-Requested-With:[XMLHttpRequest] Accept-Encoding:[gzip, deflate, br] Origin:[http://127.0.0.1:8001] User-Agent:[Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36] Content-Type:[application/x-www-form-urlencoded; charset=UTF-8] Accept:[*/*] Referer:[http://127.0.0.1:8001/]] 3 4 //Form 5 map[?n??>Xx??T??{??>5??F?????}w/}?? ?|X7iZL`^?f?cOM??d? /???{???<4seN?^?? J??? ?<k?????b}???7??w?n_???N??n??|?????u:[] ???p??? 6 $ 7 ?z[@??????!7????? ?(??Rq???? 8 ????/~??fb??hA???#??BI???D?????,?Z)-??J?9? 9S9?????D? h?(? ?z?t|E????1 ???pJ??$yt??mU!c:[] /????? ??:xp?#s??????*?? 8zyw? 30??E3G?u?-???9:[] ??(??g??z???Ov??J??\2bIT2?)???[?\? ???}???k:[] ?D?‘??????MNN1??-"?:[] ???P??b???s??K ?n?(?8Dfy????R???K$??{???D~TP]d??9 -h?????Q?? ?h,i??Jf?R??p?????_??t ?2?th:[] 9 J?)?????? ,???<???2>l.?`?C?q?u<?b?7br?j?R??P,f‘b????3?`9?:l???‘a:[Y?(???????d?J?`??????E???J\~?IT???>??6??1?G?????6 10 S??>???u??!o] ?????5X< ?s6??,?}:[] ?#?.?>??rmDt?B?#??lpn?R>l?),@‘V?????:T???e??:[?И????pUu???Z?v?????? ?sC] N? ??<.?ToY^:[?????o???p??? ??x#??_??|????a}???7 [???BM?? ?O?3b:B?Y???h?#P????LTS?????s?] ?????? S*?Cz<^? #???JfO? ??m??Sp:[yE,kf?? 11 E??6??G?6 ?h???`??dT???????N??g?I8??pr????:*??)0???? X}??R??L ??? ??u?tn$????v ????? ??] name:["file" "token" 12 13 a00bbc3f9048fba16fb9559e04afe4ad 14 ------WebKitFormBoundarygnLiX6KNQHKuAd2q 15 Content-Disposition: form-data "talkerID" 16 17 100200010 18 ------WebKitFormBoundarygnLiX6KNQHKuAd2q 19 Content-Disposition: form-data "talkerIsUser" 20 21 true 22 ------WebKitFormBoundarygnLiX6KNQHKuAd2q 23 Content-Disposition: form-data "fileType" 24 25 image 26 ------WebKitFormBoundarygnLiX6KNQHKuAd2q-- 27 ] P??2?P?(???4?8t??)mD??.?‘???M??? ?????8?G? 28 ?u??:[] ------WebKitFormBoundarygnLiX6KNQHKuAd2q 29 Content-Disposition: form-data:[] \D?~????Qh*?W:[] 1???,??H??:[?])????? s???=???N?][email protected] ????TR??l#e?s?r?|??Qr XZ? ?c?H?2[qL????O???Q??R?sSN? @???3??dM?Xk?u? g<?=???P?b,8‘??~? ?N!/X??? X????B????`?eh0?!??"^?????{]? RQ?>?k-??An?‘?*? 30 SWI?k|??d ?y???? X??°??[?{*???7?bC?/?x?W?` EI??z???a?PG?4????? ??g??U?~??t?zLI(?????k??v???‘#@=M?~???#?????8B?~???6????H Jk? (9O`J??is?7?? X???r?闐7?U???=???Z7G?ǒ#?$?T?? 31 ?)?k?M< 32 ?BH?`?? ?Vt?t ?Q????Lf?r0TR???t???}?0?a??/(8??vz(?!{??1?t?M:????0??AX:?????(}???T?9 ??(?VLI??] u? Ju‘?rc???C ??O??m??M ? CW?W????:[] ??d??n?`???cta? 33 b_??|??3?"hq?Wn]e?7???GD?*uKv?9??o???Xc????]?? 34 ????w 35 ??R_R?Ix?b?а??R?zKU@????????7?:[] ?? c?|i?C?y‘O?????E/??2?mg??\??x?Og?j??s???????z ?? 36 /M????n?????z???? ? ???? ^??9??|R?y?:[^??`?3?:[)|] RF? n?$???"??e??O?????mL???mmm????O?????ss7??Lu?:[E?N4???Z?!? ^?W????OE??B???L?? 37 vF=\p{ ?? F????!X??yS|?,???f??1a?a?>??@(y?{?????.G?a-???*8?,$$???X??\???? h???_?d2]?H|~] P?:[] ?A7?d?`?D ??$???zS}l ^????????>???? L 38 S?T????? 39 k-??:b[?{0!$??j???_D??:[??????Hc??? ?"9B1FPP CemY"[?.?P?3??{????SA_KF?xb?? ‘7?C??S$lE???=??=?I?Kjb??????? 40 ?????q???????Pp=??d?‘s??z??] ?Cro???q$t??F?} ?0?"CCE)?`O?:[] nf??Ii??h?f??H?.?????A?5????u["???a?OA<????c???ζ*g3??X??ic?$??:[] ?_ME????H??s???V,zL?T?:[] ?w???u?3)??k?>?昐??X z?$ ?SH?,??bt?M? ?? t???6k 41 ??d??M錯p?n?????F?9K??????d?` ?,?>F?:[] ??:[] 4V?Y ? ??B????D?!????????j ?? 42 ??B Z‘????:[] ?.?\:?:[] .0FH!?H_??`?}f?Y??K??fkW?OO?? ?? H?\R?[w?`?uRE$RE??~[[?|???]?????/5???"_ B??5Y??2?D"U??7Yq?? 5ip?D???E$????"~r?"??t}??? ?q????O????[??N???l???.??? ?????:[] ? ??W>?3L????#:Z ???:[] ????p??!????j 43 S??`M?? ??v7j???u?@??j??`??:?y/?:\_?2????UY?hu?K??:[] z):[?2R?wa??$?NP? ?m??????t?V??????^?K??z?k$??"M?m8?!???J‘<??L‘?zRt}??[q??Q?q?????‘aM?* ?:?a:Hr ?R???D*n?S?T ?>V3-=C?S8?J,?PN?w????6??u? 44 ~?J1?Dr( ?baw?? ????k???^?????!Y???N? ?K*)?lB?????=?[)Y?O???W6?] K???q?????1?? ( h?/??d???g?:???o??/?D??????l?z???z?H?@???D???k?9VRc??DG?(?d?? 45 ?i? C? 46 ?????? 47 ??Am??ME3?d?????????cm?????}?V\????{(??}????D??7??ks?7?<~[???L????N?/ ?2u?????.???"???^:[] ???|x?)?g??o?H ???Z? 48 ??B???"?*??{ :[] ?r???x~?al )^?}???[email protected]?????js?U???????z?Q?x??? ???#?‘? ?^?M?#uTO?s ???b??D???????(9???2 49 ?T??!v?q:[y ?dv 50 m??6 ????. C?l 51 R0? ??38] 2oZ}?N?$??|??]}???R?x?/:[9)Z?^?}?????? ?A? ??)H$c???w-??? ?# 52 W9???h?: ?? 53 ?x,q BB(?"2??a?F???HJJJ?^???????????e‘?????1? 54 ~ s?UW5??~59??]??]????~??$?"??????? ?? Gnt(?*"?H$?o WKH$?D??D"?H??H$?D??w? ?.?H$W??8???] ??[‘?>^!?Y1n??B ??DC??f???????????????X?[L? 55 ?r?)Kz?m?11h???U?}z^J??o?qV1n?`??N??v??,???)V??????t@?^-???R?bo{?DR?????b\????N$?GZ:?7?? ??V!? ???pV??????}?J?A??`??,u??z!?8??-??g?‘??]???]x[?ub??#?v|/?"?v !??_1i??U?B?n?B?~L!>?T zS??G?u<Um?8?"??C ??????B!?K?I 56 ?b????@???"??W???b?? ??^$?ū?"i?XZ‘??bi?h8:[] Nm????{???J???4????6? ? 3(f?:[?????‘?xb????_????E41??1 57 "0?BDF??@??z?,???H!T??c??v8?Q]] 58 59 //MultipartForm 60 <nil>出錯時包的內容
1 Header: 2 map[Origin:[http://127.0.0.1:8001] Accept-Language:[zh-CN,zh;q=0.8] Cookie:[io=oiuZ1YssLxHIpLGMAAAo; JSESSIONID=EEE6ACD5E7EA99F16DA6FADBF5AD191F; Jax.Q=1406100039|0NBAOSWM7E2QWLVWNF8SZHF5VLN2P4; _ga=GA1.1.1822669068.1495898591] Content-Length:[5221] Connection:[keep-alive] User-Agent:[Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36] Content-Type:[multipart/form-data; boundary=----WebKitFormBoundaryIoO3ezmbW1b9b1W7] Accept:[*/*] X-Requested-With:[XMLHttpRequest] Referer:[http://127.0.0.1:8001/] Accept-Encoding:[gzip, deflate, br]] 3 Form: 4 map[] 5 MultipartForm: 6 <nil>上傳成功時包的內容
上傳成功時Form和multiForm的內容竟然都為空
把form表單的enctype去掉後也可以上傳成功
也就是說出錯是因為原來的form enctype了一次，ajax再enctype就出錯了，而且Content-Type變成了
Content-Type:[application/x-www-form-urlencoded; charset=UTF-8]
<form> multipart/form-data 上傳圖片