webentwicklung-frage-antwort-db.com.de

jQuery ajax-Uploaddatei in asp.net mvc

Ich habe eine Datei in meiner Sicht

<form id="upload" enctype="multipart/form-data">
   <input type="file" name="fileUpload" id="fileUpload" size="23" />
</form>

und eine Ajax-Anfrage

$.ajax({
    url: '<%=Url.Action("JsonSave","Survey")  %>',
    dataType: 'json',
    processData: false,
    contentType: "multipart/mixed",
    data: {
        Id: selectedRow.Id,
        Value: 'some date was added by the user here :))'
    },
    cache: false,
    success: function (data) {}
});

es gibt jedoch keine Datei in den Request.Files . Was ist los mit der Ajax-Anfrage?

jqueryasp.net-mvcajax
54
CoffeeCode

Dateien mit AJAX in ASP.Net MVC hochladen

Seit HTML5 haben sich die Dinge geändert

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

Controller

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's 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: Der HTML-Code

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

AJAX-Dateiuploads sind jetzt möglich, indem ein FormData-Objekt an die data-Eigenschaft der $.ajax-Anforderung übergeben wird.

Da das OP speziell nach einer jQuery-Implementierung gefragt hat, gehen Sie hier:

<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 });
}

Weitere Informationen zu FormData unter MDN

19
Rory McCrossan

Sie können keine Dateien über ajax hochladen, Sie müssen einen iFrame oder einen anderen Trick verwenden, um ein vollständiges Postback durchzuführen. Dies ist hauptsächlich auf Sicherheitsbedenken zurückzuführen.

Hier ist ein anständiger Bericht mit einem Beispielprojekt mit SWFUpload und ASP.Net MVC von Steve Sanderson. Es ist das erste, was ich gelesen habe, wenn ich es richtig mit Asp.Net MVC funktioniere (ich war damals auch neu bei MVC), hoffentlich ist es für Sie so hilfreich.

5
Nick Craver

Ich habe ein Beispiel wie dieses auf vuejs Version: v2.5.2

<form action="url" method="post" enctype="multipart/form-data">
    <div class="col-md-6">
        <input type="file" class="image_0" name="FilesFront" ref="FilesFront" />
    </div>
    <div class="col-md-6">
        <input type="file" class="image_1" name="FilesBack" ref="FilesBack" />
    </div>
</form>
<script>
Vue.component('v-bl-document', {
    template: '#document-item-template',
    props: ['doc'],
    data: function () {
        return {
            document: this.doc
        };
    },
    methods: {
        submit: function () {
            event.preventDefault();

            var data = new FormData();
            var _doc = this.document;
            Object.keys(_doc).forEach(function (key) {
                data.append(key, _doc[key]);
            });
            var _refs = this.$refs;
            Object.keys(_refs).forEach(function (key) {
                data.append(key, _refs[key].files[0]);
            });

            debugger;
            $.ajax({
                type: "POST",
                data: data,
                url: url,
                cache: false,
                contentType: false,
                processData: false,
                success: function (result) {
                    //do something
                },

            });
        }
    }
});
</script>
0
ddagsan

Wenn Sie ein Formular mit ajax veröffentlichen, können Sie nicht Mit der $ .ajax-Methode Senden. Sie müssen die klassische xmlHttpobject-Methode zum Speichern von Bildern verwenden... 

0
sandeep