Ajax FileUpload & JQuery formData in ASP.NET MVC

Ich habe ein Problem mit der Veröffentlichung von formData </​​code> zur serverseitigen Aktionsmethode. Da der ajax-Aufruf keine Dateien an den Server sendet, muss ich die Datei-Uploader-Daten wie folgt manuell zu formData </​​code> hinzufügen:

var formData = new FormData();
formData.append("imageFile", $("#imageFile").file);
formData.append("coverFile", $("#coverFile").file);

Ich schrieb jQuery-Funktion, die Formulardaten an Server mit Ajax-Aufruf senden müssen. Es funktioniert, aber posted formData </​​code> in Server-Seite ist immer Null!

Das ist mein Skript:

    <script>
        function SubmitButtonOnclick()
        {    
            var formData = new FormData();
            formData.append("imageFile", $("#imageFile").file);
            formData.append("coverFile", $("#coverFile").file);

            $.ajax({
                type: "POST",
                url: '@Url.Action("EditProfile", "Profile")',
                data: formData,
                dataType: 'json',
                contentType: "multipart/form-data",
                processData: false,
                success: function (response) {
                    $('#GeneralSection').html(response.responseText);
                },
                error: function (error) {
                    $('#GeneralSection').html(error.responseText);
                }
            });
        }
    </script>

Edit 1: This is the action method in controller:

        public ActionResult EditProfile(ProfileGeneralDescription editedModel,
                                HttpPostedFileBase imageFile,
                                HttpPostedFileBase coverFile,
                                string postOwnerUser)
        {
            try
            {
                if (postOwnerUser == User.Identity.Name)
                {
               //edit codes...    
                    var result = GetProfileGeneralDescription(postOwnerUser);
                    return PartialView("_GeneralProfile", result);
                }
                else
                {
                    var error = new HandleErrorInfo(
                    new Exception("Access Denied!"),
                    "Profile",
                    EditProfile
                    return PartialView("~/Views/Shared/Error.cshtml", error);
                }
            }
            catch (Exception ex)
            {
                var error = new HandleErrorInfo(ex, "Profile", EditProfile
                return PartialView("~/Views/Shared/Error.cshtml", error);
            }
        }

Edit 2: Cshtml view file content:

@model Website.Models.ViewModel.Profile

    @using (Ajax.BeginForm("EditProfile", "Profile", new { postOwnerUser = User.Identity.Name }, new AjaxOptions()
    {
        HttpMethod = "POST",
        InsertionMode = InsertionMode.Replace,
        UpdateTargetId = "GeneralSection"
    }, new { enctype = "multipart/form-data" }))
    {

        <div>
             <button id="btnSubmit" type="button" onclick="SubmitButtonOnclick()">Submit</button>
        </div>

        <input type="hidden" name="username" id="username" value="@Model.Username"/>

        
Edit Photos <div> Select profile picture: <input id="imageFile" type="file" name="imageFile" accept="image/png, image/jpeg" /> @Html.CheckBoxFor(modelItem => modelItem.DefaultCover)Remove profile photo </div> <div> Select cover picture: <input id="coverFile" type="file" name="coverFile" accept="image/png, image/jpeg" /> @Html.CheckBoxFor(modelItem => modelItem.DefaultCover)RemoveCover </div>
 
    }

Any tips, link or code example would be useful.
Thank you in advance!

0
Ja, aber Stahl hat null an den Server gesendet.
hinzugefügt der Autor Mojtaba, Quelle
Haben Sie versucht, contentType auf false zu setzen?
hinzugefügt der Autor Knelis, Quelle

3 Antworten

Anstatt jQuery Ajax könnten Sie verwenden

 <script>
            function SubmitButtonOnclick()
            { 
                var formData= new FormData();
                var imagefile=document.getElementById("imageFile").files[0];
                var coverfile=document.getElementById("coverFile").files[0];
                formData.append("imageFile",imageFile);
                formData.append("coverFile",coverFile);
                var xhr = new XMLHttpRequest();
                xhr.open("POST", "/Profile/EditProfile", true);
                xhr.addEventListener("load", function (evt) { UploadComplete(evt); }, false);
                xhr.addEventListener("error", function (evt) { UploadFailed(evt); }, false);
                xhr.send(formData);

            }

      function UploadComplete(evt) {
        if (evt.target.status == 200) 
                alert("Logo uploaded successfully.");

        else 
                 alert("Error Uploading File");
        }

    function UploadFailed(evt) {
        alert("There was an error attempting to upload the file.");

    }
 </script>

Das funktioniert für mich !!

Dein Skript mit Änderungen

 function SubmitButtonOnclick() {
        var formData = new FormData();
        var file = document.getElementById("imageFile").files[0];
        var file1 = document.getElementById("coverFile").files[0];
        formData.append("imageFile", file);
        formData.append("coverfile", file1);
        $.ajax({
            type: "POST",
            url: '@Url.Action("EditProfile","Default1")',
            data: formData,
            dataType: 'json',
            contentType: false,
            processData: false,
            success: function (response) {
                $('#GeneralSection').html(response.responseText);
            },
            error: function (error) {
                $('#GeneralSection').html(error.responseText);
            }
        });
    }
0
hinzugefügt
Ihre Ratschläge waren sehr hilfreich @Nilesh. Danke :-) Es klappt endlich ohne weitere Daten zu posten. Nur diese Zeile: formData.append ("imageFile", $ ("# imageFile"). File); funktioniert nicht und muss durch formData.append ("imageFile", Datei); Danke. :)
hinzugefügt der Autor Mojtaba, Quelle
Ich kopiere deinen Code in meinen Skriptbereich, aber es werden NULL-Daten an die Serverseite gesendet. (Erfolgsalarm wurde auf der Client-Seite angezeigt)
hinzugefügt der Autor Mojtaba, Quelle
Bitte sehen Sie sich meine Frage 1 an.
hinzugefügt der Autor Mojtaba, Quelle
Du bist ein guter Lehrer. :-)
hinzugefügt der Autor Mojtaba, Quelle
Das ist wieder ein Problem. Alle Daten- und Bilddateien sind null. :-(
hinzugefügt der Autor Mojtaba, Quelle
Sehr, sehr danke Nilesh :-) Ich füge auch diesen Code hinzu, um weitere Datenfelder hinzuzufügen: var username = document.getElementById ("username"). Value; und füge dieses Feld zu formData wie folgt hinzu: < code> formData.append ("Benutzername", Benutzername);
hinzugefügt der Autor Mojtaba, Quelle
Siehe Edit 2 für cshtml view Dateiinhalt.
hinzugefügt der Autor Mojtaba, Quelle
Ich bin sehr überzeugt :-) Es geht mir auch ohne weitere Datenfelder nicht.
hinzugefügt der Autor Mojtaba, Quelle
Danke für deine Antwort. Mein letzter Code war wie deiner. Aber ich muss alle Daten zusammenstellen und den Antworttext durch den aktuellen Inhalt ersetzen, dass XHR das nicht genau für mich tut. Wie kann ich der XHR-Anfrage eine Erfolgs- oder Fehlerseite hinzufügen?
hinzugefügt der Autor Mojtaba, Quelle
Wenn ich Daten auf andere Weise posten möchte, warum formData in diesem Skript keine Bilddateien für mich enthält?
hinzugefügt der Autor Mojtaba, Quelle
Danke nochmal :-) @Nilesh weisst du warum die Erfolgsfunktion im Script nicht gefeuert wird? (Ich habe einige Tag-Inhalte durch responseText ersetzt)
hinzugefügt der Autor Mojtaba, Quelle
Danke für deine Hilfe @Nilesh. Testen Sie diese Operation mit Ihrem oder meinem Skript?
hinzugefügt der Autor Mojtaba, Quelle
Da Sie jsondata.Senden Sie Ihren Controller-Rückgabetyp zu JsonResult dh öffentlichen JsonResult EditProfile (...) und wenn Erfolg Json (true, JsonRequestBehavior.AllowGet ); sonst return return Json (false, JsonRequestBehavior.AllowGet);
hinzugefügt der Autor Nilesh, Quelle
endlich funktioniert es ... Prost !!! :)
hinzugefügt der Autor Nilesh, Quelle
Ich überprüfe es und lasse es Sie wissen
hinzugefügt der Autor Nilesh, Quelle
Mit deinem Skript
hinzugefügt der Autor Nilesh, Quelle
Vielen Dank.... :-)
hinzugefügt der Autor Nilesh, Quelle
@RachitGupta können Sie Ihren Code teilen
hinzugefügt der Autor Nilesh, Quelle
Ich habe die Antwort aktualisiert ... Verwenden Sie nicht jQuery in dieser Datei anhängen
hinzugefügt der Autor Nilesh, Quelle
In Ihrer Ajax-Methode habe ich ContentType: false geändert, dann kommt das Image im Controller
hinzugefügt der Autor Nilesh, Quelle
Ich habe versucht, nur für Bilder in Ihrem ajax.beginform funktioniert, aber nicht sicher, wie Sie Daten auf dem Controller veröffentlichen
hinzugefügt der Autor Nilesh, Quelle
Ich habe es versucht ... sie arbeiten hier ... kannst du deinen neuesten Code posten wenn möglich
hinzugefügt der Autor Nilesh, Quelle
Überprüfen Sie die aktualisierte Antwort. Ich weiß nicht, warum jQuery keine Datei nimmt, also habe ich Javascript benutzt
hinzugefügt der Autor Nilesh, Quelle
kannst du mir deinen Controllercode zeigen?
hinzugefügt der Autor Nilesh, Quelle
Wenn es erfolgreich ist, wird UploadComplete -Funktion aufgerufen. Sie können Ihren Code in dieser Methode schreiben. Wenn das Hochladen fehlschlägt, wird die Funktion UploadFailed aufgerufen
hinzugefügt der Autor Nilesh, Quelle
Nilesh, ich habe es genau so versucht, aber Fehler bekommen. Sogar error.responseText druckt nichts
hinzugefügt der Autor It's a trap, Quelle
Vielen Dank, es hilft mir, zu große Rohdaten zu senden, vielen Dank.
hinzugefügt der Autor Jay Magwadiya, Quelle
   <input type="file" id="picfile" name="picf" />
       <input type="text" id="txtName" style="width: 144px;" />
 $("#btncatsave").click(function() {
var Name = $("#txtName").val();
var formData = new FormData();
var totalFiles = document.getElementById("picfile").files.length;

                    var file = document.getElementById("picfile").files[0];
                    formData.append("FileUpload", file);
                    formData.append("Name", Name);

$.ajax({
                    type: "POST",
                    url: '/Category_Subcategory/Save_Category',
                    data: formData,
                    dataType: 'json',
                    contentType: false,
                    processData: false,
                    success: function (msg) {

                                 alert(msg);

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

});

 [HttpPost]
    public ActionResult Save_Category()
    {
      string Name=Request.Form[1]; 
      if (Request.Files.Count > 0)
        {
            HttpPostedFileBase file = Request.Files[0];
         }


    }
0
hinzugefügt

Ich war in der Lage, Datei über jQuery mit dem iframe hochladen, ich erklärte das gleiche in meinem Blog-Beitrag, folgen Sie bitte dem Link, um die Antwort zu erhalten.

http://kaushikghosh12.blogspot.com/2014/02 /ajax-fileupload-on-all-browsers.html

0
hinzugefügt
JavaScript - Deutsche Gemeinschaft
JavaScript - Deutsche Gemeinschaft
3 der Teilnehmer

In dieser Gruppe sprechen wir über JavaScript.