質問: new formdata($(this)[0]); $.ajax({ url: window.location.pathname, type: 'post', data: formdata, async: false, success: function (data) { alert(data) }, cache: false, contenttype: false, processdata: false }); return false; }); <form id="files" method="post" enctype="multipart/form-data"> <input name="image" type="file" /> <button>submit</button> </form> ajaxを介してデータとファイルを1つの形式で送信できるようにするには、どうすればよいですか。私の目的は、ajaxを使ってこのフォームすべてを1つの記事にまとめて送信できるようにすることです。可能ですか。<form id="datafiles" method="post" enctype="multipart/form-data"> <input type="text" name="first" value="bob" /> <input type="text" name="middle" value="james" /> <input type="text" name="last" value="smith" /> <input name="image" type="file" /> <button>submit</button> </form>
回答: 私にとっては、ajaxリクエストにenctype: 'multipart/form-data'フィールドがないとうまくいきませんでした。私はそれが同様の問題で立ち往生している誰かに役立つことを願っています。何らかの理由でenctype がform属性 に設定されていても、ajaxリクエストは明示的な宣言なしにenctypeを自動的に識別しませんでした(jquery 3.3.1)。// tested, this works for me (jquery 3.3.1) fileuploadform.submit(function (e) { e.preventdefault(); $.ajax({ type: 'post', url: $(this).attr('action'), enctype: 'multipart/form-data', data: new formdata(this), processdata: false, contenttype: false, success: function (data) { console.log('thank god it worked!'); } } ); }); // enctype field was set in the form but ajax request didn't set it by default. <form action="process/file-upload" enctype="multipart/form-data" method="post" > <input type="file" name="input-file" accept="text/plain" required> ... </form> 上記のように、contenttypeとprocessdataフィールドにも特別な注意を払ってください。