4

Como posso fazer vários uploads, ou seja, tenho uma tela com vários input do tipo file, como faço para passar isso via Ajax para o meu servidor?

Já tentei com XmlHttpRequest, porém, não deu certo, daria se tivesse um input com att multiple, mas não é o caso.

Obs: Estou fazendo aplicação com ASP.NET MVC

3
  • 1
    possível duplicata de Múltiplos uploads via ajax
    – Jorge B.
    2/07/2014 às 14:59
  • Pergunta duplicada, favor utilizar as mesmas perguntas já criadas por você mesmo. 2/07/2014 às 15:59
  • @Macalister26 e ai deu certo pra ti?
    – user6026
    2/07/2014 às 22:28

2 Respostas 2

0

Exemplo com MVC ASP.NET

Cshtml

@{ Layout = null; }
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>PostFiles</title>
    <script src="~/Scripts/jquery-1.10.2.js"></script>
    <script>
    function uploadfile() {
        var img1 = $("#file1").val();
        var img2 = $("#file2").val();
        var img3 = $("#file3").val();
        var img4 = $("#file4").val();
        var img5 = $("#file5").val();
        if (img1 || img2 || img3 || img4 || img5) {
            var formData = new FormData();

            if (img1) {
                var file1 = document.getElementById('file1').files[0];
                formData.append(file1.name, file1);
            }
            if (img2) {
                var file2 = document.getElementById('file2').files[0];
                formData.append(file2.name, file2);
            }
            if (img3) {
                var file3 = document.getElementById('file3').files[0];
                formData.append(file3.name, file3);
            }
            if (img4) {
                var file4 = document.getElementById('file4').files[0];
                formData.append(file4.name, file4);
            }
            if (img5) {
                var file5 = document.getElementById('file5').files[0];
                formData.append(file5.name, file5);
            }
            var xhr = new XMLHttpRequest();
            var url = "/Estudo/PostFiles";
            xhr.open('POST', url, true);
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    //var dados = JSON.parse(xhr.responseText);                    
                }
            }
            xhr.onload = function (e) {
                var response = $.parseJSON(e.target.response);
                console.log(response.fileName);                
            };
            xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
            xhr.send(formData);
            $("#file1").val('');
            $("#file2").val('');
            $("#file3").val('');
            $("#file4").val('');
            $("#file5").val('');
        }
    }
    </script>
</head>
<body>
    <div> 
        <form action="" method="post" enctype="multipart/form-data" onsubmit="return false;">
            <div><input type="file" name="file1" id="file1"></div>
            <div><input type="file" name="file2" id="file2"></div>
            <div><input type="file" name="file3" id="file3"></div>
            <div><input type="file" name="file4" id="file4"></div>
            <div><input type="file" name="file5" id="file5"></div>
            <button type="button" onclick="uploadfile();">Enviar</button>
        </form>
    </div>
</body>
</html>

Código do Controler:

[HttpGet]
public ActionResult PostFiles()
{
    return View();
}

[HttpPost]
public JsonResult PostFiles(FormCollection form)
{            
    HttpFileCollectionBase files = Request.Files;
    foreach (String file in files)
    {
        Request.Files[file].SaveAs(Server.MapPath("~/Arquivos/") + Request.Files[file].FileName);
    }
    return Json(new { status = true });
}
1
  • 1
    Obrigado deu certo... 3/07/2014 às 11:55
0

Já tentou usar o UpdatePanel?

Neste link tem um exemplo bem completo: http://www.codeproject.com/Articles/482800/FileplusUploadplusinplusUpdateplusPanel

Basicamente seria um código assim:

 <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
                <ContentTemplate>
                    <asp:FileUpload ID="fileUploadImage" runat="server"></asp:FileUpload>
                    <asp:Button ID="btnUpload" runat="server" Text="Upload Image" OnClick="btnUpload_Click" />
                    <br />
                    <asp:Button ID="btnProcessData" runat="server" Text="Process Data" OnClick="btnProcessData_Click" /><br />
                    <asp:Label ID="lblMessage" runat="server" Text="Image uploaded successfully." Visible="false"></asp:Label><br />
                    <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
                        <ProgressTemplate>
                            Please wait image is getting uploaded....
                        </ProgressTemplate>
                    </asp:UpdateProgress>
                    <br />
                    <b>Please view the below image uploaded</b><br />
                    <asp:Image ID="img" runat="server" Width="100" Height="100" ImageAlign="Middle" />
                </ContentTemplate>
    </asp:UpdatePanel>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .