locked
upload multiple file into the server RRS feed

  • Question

  • User-1634604574 posted

    i have this view input type file which select multiple file and put them into the table now i want to send that files inside table into the server by using ajax


    <input type="button" id="Upload" value="Upload">
    <input type="file" id="FileUpload" multiple="multiple">
    <br><br>
    <table border="1" id="names"></table>

    <script>

    $('#FileUpload').change(function (e) {
    var files = $('#FileUpload').prop("files")
    var names = $.map(files, function (val) { return val.name; });
    $.each(names, function (index) {
    $('#names').append('<tr><td><input type="checkbox"></td><td>' + names[index].split('.').slice(0, -1).join('.') + '</td></tr>');
    });
    });

    //--------------------------------------------------
    $("#Upload").click(function () {
    var formData = new FormData();
    var totalFiles = document.getElementById("FileUpload").files.length;

    for (var i = 0; i < totalFiles; i++) {
    var file = document.getElementById("FileUpload").files[i];

    formData.append("FileUpload", file);
    }
    $.ajax({
    type: "POST",
    url: '/modal/Upload2',
    data: formData,
    dataType: 'json',
    contentType: false,
    processData: false,
    success: function (response) {
    alert('succes!!');
    },

    error: function (error) {
    alert("errror");
    }
    });
    });

    </script>

    controller

    public ActionResult files()
    {
    Upload2();

    return RedirectToAction("Index");
    }

    [HttpPost]
    public void Upload2()
    {
    for (int i = 0; i < Request.Files.Count; i++)
    {
    var file = Request.Files[i];

    var fileName = Path.GetFileName(file.FileName);

    var path = Path.Combine(Server.MapPath("~/images/"), fileName);
    file.SaveAs(path);
    }

    }

    Monday, January 28, 2019 11:45 AM

All replies

  • User-474980206 posted

    to be included in FormData(), the input elements must have a name.

    Monday, January 28, 2019 4:34 PM
  • User-1634604574 posted

    how can i do it can you explain more detail

    Monday, January 28, 2019 8:09 PM
  • User1520731567 posted

    Hi zhyanadil.it@gmail.com,

    I suggest you could use submit form and foreach in post action,it is simpler to implement.

    For example:

    Index View:

    <form action="@Url.Action("Upload", "Home" )" enctype="multipart/form-data" method="post">
        <input type="submit" id="Upload" value="Upload">
        <input type="file" id="FileUpload" multiple="multiple" name="FileUpload">
    
    
    </form>

    Upload action:

    [HttpPost]
            public ActionResult Upload(IEnumerable<HttpPostedFileBase> FileUpload)
            {
                // for (int i = 0; i < Request.Files.Count; i++)
                foreach (HttpPostedFileBase file in FileUpload)
                {
    
                    var fileName = Path.GetFileName(file.FileName);
    
                    var path = Path.Combine(Server.MapPath("~/images/"), fileName);
                    file.SaveAs(path);
                }
                return View("files");
    }

    You could also refer to this article about Uploading Multiple Files In ASP.NET MVC:

    https://www.c-sharpcorner.com/article/uploading-multiple-files-in-asp-net-mvc/

    Best Regards.

    Yuki Tao

    Thursday, February 7, 2019 7:51 AM
  • User-474980206 posted

    without a name attribute:

    <input type="submit" id="Upload" value="Upload">

    will not be uploaded. try:

    <input type="submit" id="Upload" name="upload" value="Upload">
    Thursday, February 7, 2019 4:08 PM