やりたいこと
ajaxで画像を複数アップロードしたいと考えています。
その際、FormDataを使用せずに複数の画像をアップロードする方法が知りたいです。
FormDataの使用への不安
自身で調べた際に、画像のアップロードをする場合、以下のようにFormDataを使用することを考えました。
html <form id="send-form" method="post" enctype="multipart/form-data"> <input type="text" name="sample" value=""> <input type="file" name="file[]"> <input type="file" name="file[]"> <input type="file" name="file[]"> <input type="submit" value="送信"> </form>
jquery $(function() { $('#send-form').submit(function() { /* 画像ファイルの取得・セット */ var fd = new FormData(); var fd = new FormData($('#send-form').get(0)); /* その他フォームデータのセット */ var sample = $('*[name="sample"]').val(); fd.append('sample', sample); /* Ajax経由でデータを登録 */ $.ajax({ url: 'upload.php', type: 'POST', data: fd, cache: false, contentType: false, processData: false, dataType: 'html' }) .done( (data) => { alert("成功"); }) .fail( (data) => { alert("失敗"); }) .always( (data) => { }); }); });
書いたコード
しかし、FormDataが使えない機種やブラウザがあるという情報を目にして以来、FormDataはなるべく使いたくないと思い、FormDataを使用せずにコードを書こうと思いました。
以下のようなコードを書いたのですが、画像データの取得方法がわかりません。
※コード内の、「'file':この部分の書き方がわかりません。」のところです。
jquery $(function() { $('#send-form').submit(function() { $.ajax({ url: 'upload.php', type: 'POST', data:{ 'sample':$('*[name="sample"]').val(), 'file':この部分の書き方がわかりません。 }, cache: false, contentType: false, processData: false, dataType: 'html' }) .done( (data) => { alert("成功"); }) .fail( (data) => { alert("失敗"); }) .always( (data) => { }); }); });
ajaxで画像を複数アップロードすることを、FormDataを使用せずに実現する方法について、ご存知の方がいらっしゃいましたら、ご教授いただけましたら幸いでございます。
何卒、よろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/06/07 23:43
2020/06/08 00:03
2020/06/08 00:04
2020/06/08 00:58
2020/06/08 01:02
2020/06/08 02:25