Uploads of files via ajax

Asked

Viewed 642 times

4

How can I do several uploads, IE, I have a screen with several input of the kind file, how do I pass this via Ajax to my server?

I’ve tried with Xmlhttprequest, but it didn’t work, it would if you had a input with att multiple, but that is not the case.

Note: I am making application with ASP.NET MVC

asp.net-mvc ajax upload
  • 1

    possible duplicate of Multiple uploads via ajax

  • Duplicate question, please use the same questions already created by yourself.

  • @Macalister26 and then it worked for you?

2 answers

0

Have you tried using Updatepanel?

This link has a very complete example: http://www.codeproject.com/Articles/482800/FileplusUploadplusinplusUpdateplusPanel

Basically it would be a code like this:

 <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>

0


Example with 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>

Code of the 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

    Thanks worked out...

Browser other questions tagged asp.net-mvc ajax upload

You are not signed in. Login or sign up in order to post.