Ich möchte einen einfachen Datei-Upload in meiner Intranetseite mit dem kleinstmöglichen Setup implementieren.
Dies ist mein HTML-Teil:
<input id="sortpicture" type="file" name="sortpic" />
<button id="upload">Upload</button>
und das ist mein JS-Abfrageskript:
$("#upload").on("click", function() {
var file_data = $("#sortpicture").prop("files")[0];
var form_data = new FormData();
form_data.append("file", file_data);
alert(form_data);
$.ajax({
url: "/uploads",
dataType: 'script',
cache: false,
contentType: false,
processData: false,
data: form_data,
type: 'post',
success: function(){
alert("works");
}
});
});
Im Stammverzeichnis der Website befindet sich ein Ordner mit dem Namen "Uploads" mit Änderungsberechtigungen für "Benutzer" und "IIS_Benutzer".
Wenn ich eine Datei mit dem Dateiformat auswähle und die Upload-Taste drücke, gibt die erste Warnung "[Objekt FormData]" zurück. Die zweite Warnung wird nicht aufgerufen und der Ordner "Uploads" ist ebenfalls leer!?
Kann mir jemand helfen, herauszufinden, was falsch ist?
Der nächste Schritt sollte auch sein, die Datei mit einem serverseitig generierten Namen umzubenennen. Vielleicht kann mir auch jemand eine Lösung dafür geben.
Antworten:
Sie benötigen ein Skript, das auf dem Server ausgeführt wird, um die Datei in das Upload-Verzeichnis zu verschieben. Die jQuery-
ajax
Methode (die im Browser ausgeführt wird) sendet die Formulardaten an den Server. Anschließend übernimmt ein Skript auf dem Server den Upload. Hier ist ein Beispiel mit PHP.Ihr HTML ist in Ordnung, aber aktualisieren Sie Ihr JS jQuery-Skript so, dass es so aussieht:
Und nun zum serverseitigen Skript, in diesem Fall mit PHP.
upload.php : Ein PHP-Skript, das auf dem Server ausgeführt wird und die Datei in das Upload-Verzeichnis leitet:
Außerdem ein paar Dinge über das Zielverzeichnis:
Und ein bisschen über die PHP-Funktion
move_uploaded_file
, die im Skript upload.php verwendet wird :$_FILES['file']['name']
ist der Name der Datei beim Hochladen. Das musst du nicht benutzen. Sie können der Datei einen beliebigen Namen (Server-Dateisystem-kompatibel) geben:Beachten Sie schließlich Ihre PHP-
upload_max_filesize
UNDpost_max_size
Konfigurationswerte und stellen Sie sicher, dass Ihre Testdateien auch diese nicht überschreiten. Hier finden Sie einige Hilfestellungen zum Überprüfen der PHP-Konfiguration und zum Festlegen der maximalen Dateigröße und der Post-Einstellungen .quelle
form_data.append
Funktion in "file" geändert . Also habe ich das PHP-Skript geändert, um den neuen Namen der Formulareingabe wiederzugeben. Ich habe auch die PHP-Skriptantwort in die Ajax-Erfolgswarnung gezogen, um beim Debuggen zu helfen.$_FILES['file']
quelle
quelle
und dies ist die PHP-Datei, um die aktualisierten Dateien zu empfangen
quelle
if (true)
? Ist es immer wahr, also ist es nutzlos, nicht wahr? Sie haben auch eine zusätzliche End-Curly.Verwenden Sie reine js
Der Dateiname wird automatisch zur Anforderung hinzugefügt und der Server kann ihn lesen. Der 'Inhaltstyp' wird automatisch auf 'Mehrteil- / Formulardaten' gesetzt. Hier ist ein weiter entwickeltes Beispiel mit Fehlerbehandlung und zusätzlichem JSON-Senden
Code-Snippet anzeigen
quelle
Bester Datei-Upload mit Jquery Ajax mit Materialise Klicken Sie hier, um ihn herunterzuladen
Wenn Sie ein Bild auswählen, wird das Bild in Basis 64 konvertiert und Sie können es in einer Datenbank speichern, damit es auch leicht ist.
quelle