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

Du kannst die neuere Fetch API in JavaScript verwenden. So:

function uploadButtonCLicked(){
    var input = document.querySelector('input[type="file"]')

    fetch('/url', {
      method: 'POST',
      body: input.files[0]
    }).then(res => res.json())   // du kannst etwas mit der Antwort machen
      .catch(error => console.error('Fehler:', error))
      .then(response => console.log('Erfolg:', response));
}                               

Vorteil: Die Fetch API wird nativ von allen modernen Browsern unterstützt, also musst du nichts importieren. Beachte auch, dass fetch() ein Versprechen zurückgibt, das dann asynchron mit .then(..Code zur Behandlung der Antwort..) behandelt wird.

Answer 2

Mit HTML5 und JavaScript ist das Hochladen von Dateien asynchron ziemlich einfach. Ich erstelle die Upload-Logik zusammen mit Ihrem HTML. Dies funktioniert nicht vollständig, da die API benötigt wird, aber es zeigt, wie es funktioniert. Wenn Sie den Endpunkt namens /upload von der Rootseite Ihrer Website haben, sollte dieser Code für Sie funktionieren:

const asyncFileUpload = () => {
  const fileInput = document.getElementById("file");
  const file = fileInput.files[0];
  const uri = "/upload";
  const xhr = new XMLHttpRequest();
  xhr.upload.onprogress = e => {
    const percentage = e.loaded / e.total;
    console.log(percentage);
  };
  xhr.onreadystatechange = e => {
    if (xhr.readyState === 4 && xhr.status === 200) {
      console.log("Datei hochgeladen");
    }
  };
  xhr.open("POST", uri, true);
  xhr.setRequestHeader("X-FileName", file.name);
  xhr.send(file);
}

  Datei

Weitere Informationen zum XMLHttpRequest:

Das XMLHttpRequest-Objekt

Alle modernen Browser unterstützen das XMLHttpRequest-Objekt. Das XMLHttpRequest-Objekt kann verwendet werden, um Daten mit einem Webserver im Hintergrund auszutauschen. Das bedeutet, dass es möglich ist, Teile einer Webseite zu aktualisieren, ohne die gesamte Seite neu zu laden.

Erstellen eines XMLHttpRequest-Objekts

Alle modernen Browser (Chrome, Firefox, IE7+, Edge, Safari, Opera) haben ein integriertes XMLHttpRequest-Objekt.

Syntax zum Erstellen eines XMLHttpRequest-Objekts:

variable = new XMLHttpRequest();

Zugriff über Domains hinweg

Aus Sicherheitsgründen erlauben moderne Browser keinen Zugriff über Domains hinweg.

Dies bedeutet, dass sowohl die Webseite als auch die XML-Datei, die sie zu laden versucht, sich auf demselben Server befinden müssen.

Die Beispiele auf W3Schools laden alle XML-Dateien, die sich auf der W3Schools-Domain befinden.

Wenn Sie das obige Beispiel auf einer Ihrer eigenen Webseiten verwenden möchten, müssen sich die zu ladenden XML-Dateien auf Ihrem eigenen Server befinden.

Weitere Details können Sie hier lesen...

Answer 3

Für PHP, schauen Sie unter https://developer.hyvor.com/php/image-upload-ajax-php-mysql

HTML

    Bild-Upload mit AJAX, PHP und MYSQL

Hochladen...

JAVASCRIPT

var previewImage = document.getElementById("preview"),  
    uploadingText = document.getElementById("uploading-text");

function submitForm(event) {
    // Standard-Formularübermittlung verhindern
    event.preventDefault();
    uploadImage();
}

function uploadImage() {
    var imageSelecter = document.getElementById("image-selecter"),
        file = imageSelecter.files[0];
    if (!file) 
        return alert("Bitte wählen Sie eine Datei aus");
    // vorheriges Bild löschen
    previewImage.removeAttribute("src");
    // Hochladetext anzeigen
    uploadingText.style.display = "block";
    // Formulardaten erstellen und Datei anhängen
    var formData = new FormData();
    formData.append("image", file);
    // AJAX-Teil durchführen
    var ajax = new XMLHttpRequest();
    ajax.onreadystatechange = function() {
        if (this.readyState === 4 && this.status === 200) {
            var json = JSON.parse(this.responseText);
            if (!json || json.status !== true) 
                return uploadError(json.error);

            showImage(json.url);
        }
    }
    ajax.open("POST", "upload.php", true);
    ajax.send(formData); // Formulardaten senden
}

PHP

 $maxFileSize)
        throw new Exception('Maximale Größenbeschränkung überschritten'); 
    // Überprüfen, ob hochgeladene Datei ein Bild ist
    $imageData = getimagesize($image['tmp_name']);
    if (!$imageData) 
        throw new Exception('Ungültiges Bild');
    $mimeType = $imageData['mime'];
    // MIME-Typ überprüfen
    $allowedMimeTypes = ['image/jpeg', 'image/png', 'image/gif'];
    if (!in_array($mimeType, $allowedMimeTypes)) 
        throw new Exception('Nur JPEG, PNG und GIF sind erlaubt');

    // Gut! Es ist ein gültiges Bild
    // Dateierweiterung erhalten (z.B. jpg, png) nicht (.jpg)
    $fileExtention = strtolower(pathinfo($image['name'] ,PATHINFO_EXTENSION));
    // Zufälligen Namen für Ihr Bild erstellen
    $fileName = round(microtime(true)) . mt_rand() . '.' . $fileExtention; // irgendeinefilename.jpg
    // Pfad ab DOCUMENT ROOT Ihrer Website erstellen
    $path = '/examples/image-upload/images/' . $fileName;
    // Dateipfad auf dem Computer - wo soll es gespeichert werden 
    $destination = $_SERVER['DOCUMENT_ROOT'] . $path;

    if (!move_uploaded_file($image['tmp_name'], $destination))
        throw new Exception('Fehler beim Verschieben der hochgeladenen Datei');

    // URL erstellen
    $protocol = stripos($_SERVER['SERVER_PROTOCOL'],'https') === true ? 'https://' : 'http://';
    $domain = $protocol . $_SERVER['SERVER_NAME'];
    $url = $domain . $path;
    $stmt = $mysqli -> prepare('INSERT INTO image_uploads (url) VALUES (?)');
    if (
        $stmt &&
        $stmt -> bind_param('s', $url) &&
        $stmt -> execute()
    ) {
        exit(
            json_encode(
                array(
                    'status' => true,
                    'url' => $url
                )
            )
        );
    } else 
        throw new Exception('Fehler beim Speichern in der Datenbank');

} catch (Exception $e) {
    exit(json_encode(
        array (
            'status' => false,
            'error' => $e -> getMessage()
        )
    ));
}

Answer 4

Sie können die asynchrone Mehrfachdatei-Uploads mit JavaScript oder jQuery durchführen, ohne ein Plugin zu verwenden. Sie können auch den Echtzeit-Fortschritt des Datei-Uploads im Fortschrittssteuerelement anzeigen. Ich bin auf 2 schöne Links gestoßen -

1. ASP.NET Web Forms basierte Mehrfachdatei-Upload-Funktion mit Fortschrittsbalken
2. ASP.NET MVC basierter Mehrfachdatei-Upload erstellt in jQuery

Die serverseitige Sprache ist C#, aber Sie können einige Änderungen vornehmen, um sie mit einer anderen Sprache wie PHP zu verwenden.

Datei-Upload ASP.NET Core MVC:

Erstellen Sie im View einen Datei-Upload-Steuerung in HTML:

    Senden

Erstellen Sie jetzt die Aktionsmethode in Ihrem Controller:

[HttpPost]
public async Task Add(IFormFile[] mediaUpload)
{
    //Durchlaufen aller Dateien
    foreach (IFormFile file in mediaUpload)
    {
        //Dateien speichern
        string path = Path.Combine(hostingEnvironment.WebRootPath, "einigen-Ordner-Pfad"); 
        using (var stream = new FileStream(path, FileMode.Create))
        {
            await file.CopyToAsync(stream);
        }
    }
}

Die Variable "hostingEnvironment" ist vom Typ IHostingEnvironment und kann dem Controller über Dependency Injection injiziert werden, wie zum Beispiel:

private IHostingEnvironment hostingEnvironment;
public MediaController(IHostingEnvironment environment)
{
    hostingEnvironment = environment;
}

Answer 5

Versuchen

async function saveFile() 
{
    let formData = new FormData();           
    formData.append("file", file.files[0]);
    await fetch('addFile.do', {method: "POST", body: formData});    
    alert("Daten hochgeladen: ");
}

Datei

Der content-type='multipart/form-data' wird automatisch vom Browser festgelegt, der Dateiname wird ebenfalls automatisch zum filename FormData-Parameter hinzugefügt (und kann vom Server leicht gelesen werden). Hier ist ein weiteres Beispiel mit Fehlerbehandlung und Hinzufügen von JSON

async function saveFile(inp) 
{
    let user = { name:'john', age:34 };
    let formData = new FormData();
    let photo = inp.files[0];      

    formData.append("photo", photo);
    formData.append("user", JSON.stringify(user));  

    try {
       let r = await fetch('/upload/image', {method: "POST", body: formData}); 
       console.log('HTTP-Antwortcode:',r.status); 
       alert('Erfolg');
    } catch(e) {
       console.log('Houston, wir haben ein Problem...:', e);
    }

}

Vor der Auswahl der Datei Chrome-Konsole öffnen > Netzwerktab, um die Anforderungsdetails zu sehen.

Weil in diesem Beispiel die Anfrage an https://stacksnippets.net/upload/image gesendet wird, wird der Antwortcode natürlich 404 sein...