<form> multipart/form-data 上传图片

首页 > 代码库 > <form> multipart/form-data 上传图片

<form> multipart/form-data 上传图片

2024-09-30 22:11:02 216人阅读

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>-->
5                 <button class="btn confirm">确定</button>

html

 1     chatDialog.find(".btn.confirm").click(function() {
 2         //chatDialog.find("form").submit();
 3         submitForm();
 4         bodyModal.hide();
 5         selectDialog.hide();
 6     });    
 7 function submitForm() {
 8         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");
14         console.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     }

javascript

原文

原文是在<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?]??yQ@iB    ????TR??l#e?s?r?|??QrXZ??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????"9B1FPPCemY"[?.?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 ??BZ‘????:[] ?.?\:?:[] .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)^?}???b??@V7?????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,qBB(?"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!>?TzS??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 上传图片

声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉：投诉/举报工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。

联系
我们

首页 > 代码库 > <form> multipart/form-data 上传图片

<form> multipart/form-data 上传图片

看完仍有疑问？有类似问题直接问程序猿