Wie kann ich Dateien mit jQuery asynchron hochladen?

Question

Ich möchte eine Datei asynchron mit jQuery hochladen.

$(document).ready(function () {
    $("#uploadbutton").click(function () {
        var filename = $("#file").val();

        $.ajax({
            type: "POST",
            url: "addFile.do",
            enctype: 'multipart/form-data',
            data: {
                file: filename
            },
            success: function () {
                alert("Daten hochgeladen: ");
            }
        });
    });
});

Datei

Statt die Datei hochzuladen, erhalte ich nur den Dateinamen. Was kann ich tun, um dieses Problem zu beheben?

Answer 1

var formData=new FormData();
formData.append("fieldname","value");
formData.append("image",$('[name="filename"]')[0].files[0]);

$.ajax({
    url:"page.php",
    data:formData,
    type: 'POST',
    dataType:"JSON",
    cache: false,
    contentType: false,
    processData: false,
    success:function(data){ }
});

Sie können Formulardaten verwenden, um alle Ihre Werte einschließlich Bilder zu senden.

Answer 2

Ein moderner Ansatz ohne jQuery besteht darin, das FileList-Objekt zu verwenden, das Sie von zurückbekommen, wenn der Benutzer eine Datei oder mehrere Dateien auswählt, und dann Fetch zu verwenden, um das um ein FormData-Objekt gewickelte FileList zu posten.

// Das DOM-Element für die Eingabe // 
const inputElement = document.querySelector('input[type=file]');

// Höre auf die Dateieingabe des Benutzers
inputElement.addEventListener('change', () => {
    const data = new FormData();
    data.append('file', inputElement.files[0]);
    data.append('imageName', 'Blume');

    // Sie können es dann an Ihren Server senden.
    // Fetch kann ein Objekt vom Typ FormData im body akzeptieren
    fetch('/uploadImage', {
        method: 'POST',
        body: data
    });
});

Answer 3

Um Dateien asynchron mit jQuery hochzuladen, verwenden Sie die folgenden Schritte:

Schritt 1 Öffnen Sie im Projekt den NuGet-Manager und fügen Sie das Paket hinzu (jQuery-Dateiupload (Sie müssen es nur im Suchfeld eingeben, es wird angezeigt und installiert.)) URL: https://github.com/blueimp/jQuery-File-Upload

Schritt 2 Fügen Sie die folgenden Skripte in die HTML-Dateien ein, die bereits durch das obige Paket hinzugefügt wurden:

jquery.ui.widget.js

jquery.iframe-transport.js

jquery.fileupload.js

Schritt 3 Schreiben Sie den Datei-Upload-Steuerelement gemäß dem folgenden Code:

Schritt 4 Schreiben Sie eine JS-Methode "uploadFile" wie unten angegeben:

 function uploadFile(element) {

            $(element).fileupload({

                dataType: 'json',
                url: '../DocumentUpload/upload',
                autoUpload: true,
                add: function (e, data) {           
                  // Code zum Implementieren beim Auswählen einer Datei.
                  // data stellt die Dateidaten dar.
                  // Der folgende Code löst die Aktion im MVC-Controller aus.
                  data.formData =
                                    {
                                     files: data.files[0]
                                    };
                  data.submit();
                },
                done: function (e, data) {          
                   // Nach dem Hochladen der Datei.
                },
                progress: function (e, data) {

                   // Fortschritt.
                },
                fail: function (e, data) {

                   // Fehleroperation.
                },
                stop: function () {

                  // Code für den Abbruchvorgang.
                }
            });

        };

Schritt 5 Rufen Sie im fertigen Funktionselement die Dateiübertragung an, um den Prozess gemäß dem folgenden Code zu starten:

$(document).ready(function()
{
    uploadFile($('#upload'));

});

Schritt 6 Schreiben Sie den MVC-Controller und die Aktion wie unten angegeben:

public class DocumentUploadController : Controller
    {       

        [System.Web.Mvc.HttpPost]
        public JsonResult upload(ICollection files)
        {
            bool result = false;

            if (files != null || files.Count > 0)
            {
                try
                {
                    foreach (HttpPostedFileBase file in files)
                    {
                        if (file.ContentLength == 0)
                            throw new Exception("Nulle Länge der Datei!");                       
                        else 
                            // Code zum Speichern einer Datei.

                    }
                }
                catch (Exception)
                {
                    result = false;
                }
            }

            return new JsonResult()
                {
                    Data=result
                };

        }

    }

Answer 4

Dies ist meine Lösung.

        Beschreibung

und die js

    $(':button').click(function () {
        var formData = new FormData($('form')[0]);
        $.ajax({
            url: '@Url.Action("Speichern", "Startseite")',  
            type: 'POST',                
            success: completeHandler,
            data: formData,
            cache: false,
            contentType: false,
            processData: false
        });
    });    

    function completeHandler() {
        alert(":)");
    }    

Controller

[HttpPost]
public ActionResult Save(string apta_Description, HttpPostedFileBase file)
{
    [...]
}

Answer 5

Für Ihren Fall müssen Sie Ajax verwenden, um den Datei-Upload auf den Server zu vereinfachen:

    Datei

Die übermittelten Daten sind ein Formular. Verwenden Sie in Ihrem jQuery eine Formularabsendefunktion anstelle eines Klicks auf die Schaltfläche, um das Formular wie unten gezeigt zu übermitteln.

$(document).ready(function () {
   $("#formContent").submit(function(e){

     e.preventDefault();
     var formdata = new FormData(this);

 $.ajax({
     url: "ajax_upload_image.php",
     type: "POST",
     data: formdata,
     mimeTypes:"multipart/form-data",
     contentType: false,
     cache: false,
     processData: false,
     success: function(){

     alert("erfolgreich übermittelt");

     });
   });
});