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.
10
Gutes Fragenformat. Schön, Organisation zu sehen.
—
Jdero
Drucken Sie 'e' und 'data' in der Konsole direkt vor der Fehlerzeile. Was sind die Werte?
—
John 4d5
In zwei Jahren ist die jQuery-File-Upload-Dokumentation nicht besser geworden. Argh.
—
Chuck Le Butt
@MartinJH Möglicherweise gab es irgendwann einen Upload, aber ab sofort gibt es nur noch einen - die kostenpflichtige uploadiFive-Version. Und es gibt auch keine Demo; Es ist nur ein Video. Schlechte Form.
—
Steve Horvath