<form> multipart/form-data 上传图片
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>
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 }
原文是在<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�,�}:[] �#�.�>��rmDþ�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] ,所以上传成功时的数据在req.Body()那,parseForm或parseMultiForm后就可以读取了