ファイルを非同期でアップロードする方法
2019.11.27
2019.11.27
質問内容
jQueryで非同期にファイルをアップロードしたいです。
以下私のHTMLです。
File
以下jQueryコード
$(document).ready(function () { $("#uploadbutton").click(function () { var filename = $("#file").val(); $.ajax({ type: "POST", url: "addFile.do", enctype: 'multipart/form-data', data: { file: filename }, success: function () { alert("Data Uploaded: "); } }); }); });
現状はファイルをアップロードする代わりに、ファイル名のみを取得しています。
この問題を解決するにはどうすればよいですか?
ベストアンサー
HTML5を使えば、あなたはAjaxとjQueryを使ってファイルのアップロードを行うことができます。
それだけでなく、ファイルの情報(名前、サイズ、MIMEタイプ)を取得したり、アップロードの進捗状況も取得することができます。
最近、私もファイルアップローダーを作成する必要がありましたが、FlashもIframeもプラグインも使用したくなかったので、調査を重ねて解決策を思いつきました。
HTML
必要に応じていくつかの方法があります。たとえば「.on(‘change’)」を使う際は下記
$(':file').on('change', function () { var file = this.files[0]; if (file.size > 1024) { alert('max upload size is 1k'); } // Also see .name, .type });
次に、ボタンのクリックで「$.ajax()」送信する場合
$(':button').on('click', function () { $.ajax({ // Your server script to process the upload url: 'upload.php', type: 'POST', // Form data data: new FormData($('form')[0]), // Tell jQuery not to process data or worry about content-type // You *must* include these options! cache: false, contentType: false, processData: false, // Custom XMLHttpRequest xhr: function () { var myXhr = $.ajaxSettings.xhr(); if (myXhr.upload) { // For handling the progress of the upload myXhr.upload.addEventListener('progress', function (e) { if (e.lengthComputable) { $('progress').attr({ value: e.loaded, max: e.total, }); } }, false); } return myXhr; } }); });
ご覧のとおり、HTML5のAjaxとjQueryを使用すると、ファイルのアップロードが可能になるだけでなく、非常に簡単になります。
また、サンプルのものは一部ブラウザで非対応なので注意してください。
原文
https://stackoverflow.com/questions/166221/how-can-i-upload-files-asynchronously