Este artigo demonstra como implementar o upload de múltiplos arquivos em uma aplicação ASP.NET MVC utilizando AJAX.

Interface do Usuário (HTML) A interface HTML consiste em um formulário com um campo de seleção de arquivo que permite a escolha de múltiplos arquivos, uma barra de progresso e um botão para iniciar o upload.

<form id="uploadForm">
    <input type="file" id="fileSelector" name="selectedFiles" multiple />
    <progress id="uploadProgress" value="0" max="100"></progress>
    <span id="progressPercentage">0%</span>
    <button type="button" onclick="initiateUpload()">Carregar Arquivos</button>
</form>

Lógica de Upload do Lado do Cliente (JavaScript Puro) Utilizando JavaScript puro e o objeto XMLHttpRequest, podemos enviar os arquivos selecionados para o servidor e monitorar o progresso do upload.

<script type="text/javascript">
    function initiateUpload() {
        const fileInput = document.getElementById("fileSelector");
        const files = fileInput.files;
        const uploadEndpoint = "/Home/HandleUpload"; // URL do controller no servidor

        if (files.length === 0) {
            alert("Por favor, selecione arquivos para enviar.");
            return;
        }

        const formData = new FormData();
        // Adiciona dados extras, se necessário
        formData.append("uploaderName", "UserExample");

        // Adiciona cada arquivo selecionado ao FormData
        for (let i = 0; i < files.length; i++) {
            formData.append("uploadedFile" + i, files[i]);
        }

        const xhr = new XMLHttpRequest();
        xhr.open("POST", uploadEndpoint, true);

        xhr.onload = function () {
            if (xhr.status === 200) {
                alert("Upload concluído com sucesso!");
                // Opcionalmente, redirecionar ou atualizar a UI
                window.location.href = "/Home/Index";
            } else {
                alert("Ocorreu um erro durante o upload.");
            }
        };

        // Listener para o progresso do upload
        xhr.upload.addEventListener("progress", updateProgress, false);

        xhr.send(formData);
    }

    function updateProgress(event) {
        const progressBar = document.getElementById("uploadProgress");
        const percentageDisplay = document.getElementById("progressPercentage");

        if (event.lengthComputable) {
            progressBar.max = event.total;
            progressBar.value = event.loaded;
            const percentage = Math.round((event.loaded / event.total) * 100);
            percentageDisplay.textContent = percentage + "%";
        }
    }
</script>

Maniuplação do Upload no Servidor (C# - ASP.NET MVC) No lado do servidor, o controller ASP.NET MVC recebe os arquivos enviados e os salva no disco.

[HttpPost]
public ActionResult HandleUpload()
{
    // Obtém a coleção de arquivos enviados
    HttpFileCollectionBase uploadedFiles = Request.Files;

    // Itera sobre cada arquivo enviado
    for (int i = 0; i < uploadedFiles.Count; i++)
    {
        var currentFile = uploadedFiles[i];

        // Verifica se o arquivo não está vazio
        if (currentFile.ContentLength == 0) continue;

        // Define o caminho para salvar o arquivo no servidor
        // Certifique-se de que a pasta 'Upload' exista no seu projeto
        string savePath = Server.MapPath("~/Upload");
        string fileName = Path.GetFileName(currentFile.FileName);
        string fullPath = Path.Combine(savePath, fileName);

        // Salva o arquivo
        currentFile.SaveAs(fullPath);
    }

    // Redireciona para uma página após o upload
    return RedirectToAction("Index");
}

Implementação com jQuery (Alternativa) Uma alternativa utilizando jQuery simplifica a mainpulação do AJAX e do formulário.

<script type="text/javascript">
    $(document).ready(function () {
        $('#uploadForm').submit(function (event) {
            event.preventDefault(); // Previne o envio padrão do formulário

            const formData = new FormData();
            const files = $('#fileSelector')[0].files; // Acessa os arquivos

            // Adiciona os arquivos ao FormData
            for (let i = 0; i < files.length; i++) {
                formData.append("uploadedFile" + i, files[i]);
            }

            $.ajax({
                type: 'POST',
                url: '/Home/HandleUpload', // Mesma URL do controller
                data: formData,
                contentType: false, // Necessário para enviar FormData
                processData: false, // Necessário para enviar FormData
                success: function () {
                    alert('Upload realizado com sucesso via jQuery!');
                    // Atualizar UI ou redirecionar
                },
                error: function () {
                    alert('Falha no upload via jQuery.');
                }
                // O monitoramento de progresso pode ser adicionado aqui com xhr.upload.addEventListener
                // antes de chamar $.ajax, obtendo o objeto xhr retornado.
            });
        });

        // Opcional: um botão que chama a submissão do formulário
        // $("#submitButton").click(function() {
        //     $("#uploadForm").submit();
        // });
    });
</script>