EDYCJA (październik 2019):
6 lat później i jQuery File Upload najwyraźniej nadal doprowadza ludzi do szaleństwa. Jeśli w odpowiedziach tutaj nie znajdziesz ukojenia, spróbuj poszukać w NPM nowoczesnej alternatywy. Obiecuję, że to nie jest warte zachodu.Poleciłem Uploadify w poprzedniej edycji, ale jak zauważył komentator, wydaje się, że nie oferują już darmowej wersji. W każdym razie Uploadify był taki 2013.
EDYTOWAĆ:
Wydaje się, że nadal generuje ruch, więc wyjaśnię, co w końcu zrobiłem. W końcu uruchomiłem wtyczkę, postępując zgodnie z samouczkiem w zaakceptowanej odpowiedzi. Jednak przesyłanie plików jQuery jest prawdziwym kłopotem i jeśli szukasz prostszej wtyczki do przesyłania plików, gorąco polecam Uploadify . Jak wskazano w odpowiedzi, jest on darmowy tylko do użytku niekomercyjnego.tło
Próbuję użyć funkcji przesyłania plików jQuery firmy blueimp, aby umożliwić użytkownikom przesyłanie plików. Po wyjęciu z pudełka działa idealnie , postępując zgodnie z instrukcjami konfiguracji. Ale żeby używać go praktycznie w mojej witrynie, chcę mieć możliwość zrobienia kilku rzeczy:
- Umieść program do przesyłania na wszystkich moich istniejących stronach
- Zmień katalog dla przesłanych plików
Wszystkie pliki wtyczki znajdują się w folderze w katalogu głównym.
Próbowałem...
- Przeniesienie strony demonstracyjnej do katalogu głównego i zaktualizowanie ścieżek dla niezbędnych skryptów
- Zmiana opcji „upload_dir” i „upload_url” w pliku UploadHandler.php zgodnie z sugestią tutaj .
- Zmiana adresu URL w drugiej linii kodu javascript demonstracyjnego
We wszystkich przypadkach, pokazy podglądu, a postęp działa bar, ale pliki nie przesyłać, a ja dostać ten błąd w konsoli: Uncaught TypeError: Cannot read property 'files' of undefined. Nie rozumiem, jak działają wszystkie części wtyczki, co utrudnia debugowanie.
Kod
JavaScript na stronie demonstracyjnej:
$(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');
});
Dziwię się brakiem dokumentacji; wydaje się, że zmiana powinna być łatwa. Byłbym wdzięczny, gdyby ktoś mógł wyjaśnić, jak to zrobić.
10
Dobry format pytania. Miło widzieć organizację.
—
jdero
wypisz „e” i „data” w konsoli tuż przed linią błędu, jakie są wartości?
—
john 4d5
W ciągu dwóch lat dokumentacja jQuery-File-Upload nie poprawiła się. Argh.
—
Chuck Le Butt
@MartinJH w pewnym momencie mogło nastąpić uploadify, ale na razie jest tylko jedna - płatna wersja uploadiFive. Nie ma też wersji demonstracyjnej; to tylko wideo. Słaba forma.
—
Steve Horvath