EDIT (Okt 2019):
6 Jahre später und jQuery File Upload macht die Leute eindeutig immer noch wahnsinnig. Wenn Sie in den Antworten hier wenig Trost finden, suchen Sie in NPM nach einer modernen Alternative. Es ist den Aufwand nicht wert, das verspreche ich.Ich habe Uploadify in der vorherigen Bearbeitung empfohlen, aber wie ein Kommentator betonte, scheinen sie keine kostenlose Version mehr anzubieten. Uploadify war sowieso so 2013.
BEARBEITEN:
Dies scheint immer noch Verkehr zu bekommen, also werde ich erklären, was ich letztendlich getan habe. Ich habe das Plugin schließlich zum Laufen gebracht, indem ich dem Tutorial in der akzeptierten Antwort gefolgt bin. Das Hochladen von jQuery-Dateien ist jedoch ein echtes Problem . Wenn Sie nach einem einfacheren Plugin zum Hochladen von Dateien suchen, würde ich Uploadify wärmstens empfehlen . Als Antwort wurde darauf hingewiesen, dass es nur für den nichtkommerziellen Gebrauch kostenlos ist.Hintergrund
Ich versuche, den jQuery-Datei-Upload von blueimp zu verwenden , damit Benutzer Dateien hochladen können. Nach dem Auspacken funktioniert es einwandfrei und folgt den Anweisungen zum Einrichten. Aber um es praktisch auf meiner Website zu verwenden, möchte ich in der Lage sein, einige Dinge zu tun:
- Fügen Sie den Uploader auf einer meiner vorhandenen Seiten ein
- Ändern Sie das Verzeichnis für hochgeladene Dateien
Alle Dateien für das Plugin befinden sich in einem Ordner unter dem Stammverzeichnis.
Ich habe es versucht...
- Verschieben Sie die Demoseite in das Stammverzeichnis und aktualisieren Sie die Pfade für die erforderlichen Skripte
- Ändern der Optionen 'upload_dir' und 'upload_url' in der Datei UploadHandler.php wie hier vorgeschlagen .
- Ändern der URL in der zweiten Zeile des Demo-Javascript
In allen Fällen wird die Vorschau angezeigt und der Fortschrittsbalken wird ausgeführt, aber die Dateien können nicht hochgeladen werden. In der Konsole wird folgende Fehlermeldung angezeigt : Uncaught TypeError: Cannot read property 'files' of undefined
. Ich verstehe nicht, wie alle Teile des Plugins funktionieren, was das Debuggen erschwert.
Code
Das Javascript auf der Demoseite:
$(function () {
'use strict';
// Change this to the location of your server-side upload handler:
var url = 'file_upload/server/php/UploadHandler.php',
uploadButton = $('<button/>')
.addClass('btn')
.prop('disabled', true)
.text('Processing...')
.on('click', function () {
var $this = $(this),
data = $this.data();
$this
.off('click')
.text('Abort')
.on('click', function () {
$this.remove();
data.abort();
});
data.submit().always(function () {
$this.remove();
});
});
$('#fileupload').fileupload({
url: url,
dataType: 'json',
autoUpload: false,
acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
maxFileSize: 5000000, // 5 MB
// Enable image resizing, except for Android and Opera,
// which actually support image resizing, but fail to
// send Blob objects via XHR requests:
disableImageResize: /Android(?!.*Chrome)|Opera/
.test(window.navigator.userAgent),
previewMaxWidth: 100,
previewMaxHeight: 100,
previewCrop: true
}).on('fileuploadadd', function (e, data) {
data.context = $('<div/>').appendTo('#files');
$.each(data.files, function (index, file) {
var node = $('<p/>')
.append($('<span/>').text(file.name));
if (!index) {
node
.append('<br>')
.append(uploadButton.clone(true).data(data));
}
node.appendTo(data.context);
});
}).on('fileuploadprocessalways', function (e, data) {
var index = data.index,
file = data.files[index],
node = $(data.context.children()[index]);
if (file.preview) {
node
.prepend('<br>')
.prepend(file.preview);
}
if (file.error) {
node
.append('<br>')
.append(file.error);
}
if (index + 1 === data.files.length) {
data.context.find('button')
.text('Upload')
.prop('disabled', !!data.files.error);
}
}).on('fileuploadprogressall', function (e, data) {
var progress = parseInt(data.loaded / data.total * 100, 10);
$('#progress .bar').css(
'width',
progress + '%'
);
}).on('fileuploaddone', function (e, data) {
$.each(data.result.files, function (index, file) {
var link = $('<a>')
.attr('target', '_blank')
.prop('href', file.url);
$(data.context.children()[index])
.wrap(link);
});
}).on('fileuploadfail', function (e, data) {
$.each(data.result.files, function (index, file) {
var error = $('<span/>').text(file.error);
$(data.context.children()[index])
.append('<br>')
.append(error);
});
}).prop('disabled', !$.support.fileInput)
.parent().addClass($.support.fileInput ? undefined : 'disabled');
});
Ich bin überrascht über den Mangel an Dokumentation; Es scheint, als sollte es einfach sein, etwas zu ändern. Ich würde mich freuen, wenn jemand erklären könnte, wie das geht.
Antworten:
Ich habe vor einigen Tagen nach einer ähnlichen Funktionalität gesucht und bin auf ein gutes Tutorial zum Tutorialzine gestoßen. Hier ist ein Arbeitsbeispiel. Das vollständige Tutorial finden Sie hier .
Einfaches Formular zum Halten des Dialogs zum Hochladen von Dateien:
Und hier ist der jQuery-Code zum Hochladen der Dateien:
Und hier ist das PHP-Codebeispiel zur Verarbeitung der Daten:
Der obige Code kann zu jedem vorhandenen Formular hinzugefügt werden. Dieses Programm lädt automatisch Bilder hoch, sobald sie hinzugefügt wurden. Diese Funktionalität kann geändert werden und Sie können das Bild senden, während Sie Ihr vorhandenes Formular senden.
Meine Antwort wurde mit dem aktuellen Code aktualisiert. Alle Credits an den ursprünglichen Autor des Codes.
Quelle: http://tutorialzine.com/2013/05/mini-ajax-file-upload-form/
quelle
if($_POST)
Anweisung. POST soll leer sein, der Dateiinhalt wird gesendet$_FILES['upfile']['tmp_name']
. Hoffentlich spart dies jemandem etwas Zeit.Ich habe gerade 2 Stunden mit jQuery Upload gekämpft, aber wegen der Menge an Abhängigkeiten aufgegeben (ich hatte 13 JS-Dateien enthalten, um alle Schnickschnack zu bekommen).
Ich habe ein bisschen mehr gesucht und bin auf ein ordentliches Projekt namens Dropzone.js gestoßen , das keine Abhängigkeiten hat.
Der Autor hat auch eine Bootstrap-Demo erstellt, die vom jQuery File Upload-Plugin inspiriert wurde.
Ich hoffe, das spart jemand anderem etwas Zeit.
quelle
Ich hatte auch Probleme damit, aber es funktionierte, als ich herausfand, wie die Pfade in UploadHandler.php funktionieren: upload_dir und upload_url sind die einzigen Einstellungen, die überprüft werden müssen, damit es funktioniert. Überprüfen Sie auch Ihre Serverfehlerprotokolle auf Debugging-Informationen.
quelle
Schauen Sie sich den Image Drag & Drop Uploader mit Bildvorschau mit dem Dropper JQuery Plugin an.
HTML
JS
CSS
Demo Jsfiddle
quelle
Dies ist ein gutes Angular-Plugin zum Hochladen von Dateien und kostenlos!
eckige Datei hochladen
quelle
Ich hatte eine Weile mit diesem Plugin auf Rails zu kämpfen, und dann hat jemand es gemifiziert und den gesamten Code, den ich erstellt hatte, überholt.
Es sieht zwar so aus, als würden Sie dies nicht in Rails verwenden, aber wenn jemand es verwendet, sehen Sie sich dieses Juwel an . Die Quelle ist hier -> jQueryFileUpload Rails .
Aktualisieren:
Um den Kommentator zufrieden zu stellen, habe ich meine Antwort aktualisiert. Im Wesentlichen " Verwenden Sie dieses Juwel , hier ist der Quellcode " Wenn es verschwindet, dann tun Sie es auf dem langen Weg.
quelle
Hallo Versuch unten Link, es ist sehr einfach. Ich bin schon lange festgefahren und es löst mein Problem in wenigen Minuten. http://simpleupload.michaelcbrook.com/#examples
quelle
Droply.js ist dafür perfekt. Es ist einfach und wird mit einer Demo-Site geliefert, die sofort funktioniert.
quelle
Sie können uploadify verwenden. Dies ist das beste Multiupload-JQuery-Plugin, das ich verwendet habe.
Die Implementierung ist einfach, die Browserunterstützung ist perfekt.
quelle
Für das UI-Plugin mit JSP-Seite und Spring MVC.
Beispiel HTML . Muss sich in einem Formularelement mit dem ID- Attribut fileupload befinden
Beispiel für das Hochladen und Löschen von Anforderungshandlern
Beispielklasse zum Generieren der erforderlichen JSON-Antwort
Siehe https://pitipata.blogspot.co.ke/2017/01/using-jquery-file-upload-ui.html
quelle