複数ファイルをUploadする。（javascript, C#)

今回は手抜きのためjQueryを使ってます。
基本的にはinput type=”file”からfilesを引っ張って、FormDataにappendします。
んで、そのあとにPostするだけ。

Uploadの進捗も表示したいケースが多いと思うので、xhr.uploadのprogressイベントを購読して、プログレスバーを変化させます。

javascript

var uploadButton = document.getElementById('uploadButton');
uploadButton.onclick = function () {
    var files = fileInput.files;
    if (!files || files.length === 0) {
        return;
    }

    var formData = new FormData();

    for (let i = 0; i < files.length; i++) {
        var file = files[i];
        formData.append('file' + i.toString(), file);
    }

    var progress = document.getElementById('uploadProgress');
    $.ajax({
        url: apiUrl,
        type: 'POST',
        data: formData,
        cache: false,
        enctype: 'multipart/form-data',
        contentType: false,
        processData: false,
        xhr: function () {
            var xhr = $.ajaxSettings.xhr();
            if (xhr.upload) {
                xhr.upload.addEventListener(
                    'progress',
                    function (e) {
                        var percent = parseInt((e.loaded / e.total) * 10000) / 100;
                        progress.setAttribute('value', percent);
                        progress.textContent = percent;
                    },
                    false
                );
            }
            return xhr;
        }
    })
        .done(function (data) {
            console.log(data);
        })
        .fail(function (err) {
            console.log(err);
        });
};

HTML

<progress id="uploadProgress" value="0" max="100">0 %</progress>
<input type="file" id="uploadFileInput" multiple>
<button type="button" id="uploadButton">アップロード</button>

C#

var files = context.Request.Files;
if (files.Count == 0)
{
    return;
}

for (vari = 0; i < files.Count; i++)
{
    var file = files[i];
    var filePath = @"C:\Test\" + file.FileName;
    file.SaveAs(filePath);

    var extension = Path.GetExtension(file.FileName);
    var fileNameWithoutExtension = Path.GetFileNameWithoutExtension(file.FileName);
    xml.Files.Files.Add(new UploadImageFile {FileName = fileNameWithoutExtension, Extension = extension});
}

サーバー側のコードはこう。
HttpFileCollectionクラスであるcontext.Request.Filesを取得し、
for文でHttpPostedFileクラスのオブジェクトを1つずつ取り出して処理します。