input type=fileで選択したファイルをajaxでアップロードする
ファイルコントロールのファイル選択ダイアログで選択したファイルをアップロードします。
以下の例ではファイルを選択したタイミングでアップロードしていますが、変数filesの情報を保持しておけば、例えば登録ボタンクリック時にアップロードといったことも可能です。
<input type="file" onchange="uploadFile(event);" multiple />
<script>
// ファイルコントロールでファイル選択時に呼ばれる
function uploadFile(e) {
var files = e.target.files;
for (var i = 0; i < files.length; i++) {
// ファイルをajaxでアップロード
var xmlHttpRequest = new XMLHttpRequest();
xmlHttpRequest.open('POST', url);
xmlHttpRequest.setRequestHeader('Content-Type', 'multipart/form-data; charset=utf-8');
var data = new FormData();
data.append(files[i].name, files[i]); // ファイル情報を送信データとして設定
xmlHttpRequest.send(data);
}
}
</script>new FormData()は古いブラウザでは使用できないため注意が必要です。