Загрузите файл jQuery ajax в asp.net mvc

Ответ 1

Загрузка файлов с использованием AJAX в ASP.Net MVC

Все изменилось с HTML5

JavaScript

document.getElementById('uploader').onsubmit = function () {
    var formdata = new FormData(); //FormData object
    var fileInput = document.getElementById('fileInput');
    //Iterating through each files selected in fileInput
    for (i = 0; i < fileInput.files.length; i++) {
        //Appending each file to FormData object
        formdata.append(fileInput.files[i].name, fileInput.files[i]);
    }
    //Creating an XMLHttpRequest and sending
    var xhr = new XMLHttpRequest();
    xhr.open('POST', '/Home/Upload');
    xhr.send(formdata);
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
            alert(xhr.responseText);
        }
    }
    return false;
}   

контроллер

public JsonResult Upload()
{
    for (int i = 0; i < Request.Files.Count; i++)
    {
        HttpPostedFileBase file = Request.Files[i]; //Uploaded file
        //Use the following properties to get file name, size and MIMEType
        int fileSize = file.ContentLength;
        string fileName = file.FileName;
        string mimeType = file.ContentType;
        System.IO.Stream fileContent = file.InputStream;
        //To save file, use SaveAs method
        file.SaveAs(Server.MapPath("~/")+ fileName ); //File will be saved in application root
    }
    return Json("Uploaded " + Request.Files.Count + " files");
}

EDIT: HTML

<form id="uploader">
    <input id="fileInput" type="file" multiple>
    <input type="submit" value="Upload file" />
</form>

Ответ 2

Загрузка файлов AJAX теперь возможна, передав объект FormData в свойство data запроса $.ajax.

Поскольку OP специально запросил реализацию jQuery, вы здесь:

<form id="upload" enctype="multipart/form-data" action="@Url.Action("JsonSave", "Survey")" method="POST">
    <input type="file" name="fileUpload" id="fileUpload" size="23" /><br />
    <button>Upload!</button>
</form>

$('#upload').submit(function(e) {
    e.preventDefault(); // stop the standard form submission

    $.ajax({
        url: this.action,
        type: this.method,
        data: new FormData(this),
        cache: false,
        contentType: false,
        processData: false,
        success: function (data) {
            console.log(data.UploadedFileCount + ' file(s) uploaded successfully');
        },
        error: function(xhr, error, status) {
            console.log(error, status);
        }
    });
});

public JsonResult Survey()
{
    for (int i = 0; i < Request.Files.Count; i++)
    {
        var file = Request.Files[i];
        // save file as required here...
    }
    return Json(new { UploadedFileCount = Request.Files.Count });
}

Дополнительная информация о FormData при MDN

Ответ 3

Вы не можете загружать файлы через ajax, вам нужно использовать iFrame или какой-либо другой обман, чтобы сделать полную обратную передачу. Это связано главным образом с проблемами безопасности.

Здесь приличная запись, включая пример проекта, используя SWFUpload и ASP.Net MVC от Стива Сандерсона. Это первое, что я прочитал, чтобы это правильно работало с Asp.Net MVC (я был новичком в MVC в то время), надеюсь, он будет вам полезен.

Ответ 4

Если вы отправляете форму с помощью ajax, то вы не можете отправить изображение, используя метод $.ajax, вы должны использовать классический метод xmlHttpobject для сохранения изображения, другая альтернатива использует тип отправки вместо кнопки