zukucode
主にWEB関連の情報を技術メモとして発信しています。

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()は古いブラウザでは使用できないため注意が必要です。



関連記事