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ć.
Odpowiedzi:
Szukałem podobnej funkcjonalności kilka dni temu i znalazłem dobry tutorial na tutorialzine. Oto działający przykład. Kompletny samouczek można znaleźć tutaj .
Prosta forma do przechowywania okna dialogowego przesyłania plików:
A oto kod jQuery do przesłania plików:
A oto przykład kodu PHP do przetwarzania danych:
Powyższy kod można dodać do dowolnego istniejącego formularza. Ten program automatycznie przesyła obrazy po ich dodaniu. Ta funkcjonalność może zostać zmieniona i możesz przesłać zdjęcie podczas przesyłania istniejącego formularza.
Zaktualizowałem moją odpowiedź rzeczywistym kodem. Wszystkie kredyty dla oryginalnego autora kodu.
Źródło: http://tutorialzine.com/2013/05/mini-ajax-file-upload-form/
źródło
if($_POST)
instrukcję. POST powinien być pusty, w którym przesyłana jest zawartość pliku$_FILES['upfile']['tmp_name']
. Mam nadzieję, że to komuś zaoszczędzi trochę czasu.Właśnie spędziłem 2 godziny walcząc z jQuery Upload, ale zrezygnowałem ze względu na ilość zależności (miałem 13 plików JS dołączonych, aby uzyskać wszystkie dzwonki i gwizdki).
Poszukałem trochę więcej i natrafiłem na zgrabny projekt o nazwie Dropzone.js , który nie ma żadnych zależności.
Autor stworzył również demo bootstrap, które zostało zainspirowane wtyczką jQuery File Upload.
Mam nadzieję, że zaoszczędzi to trochę czasu komuś innemu.
źródło
Miałem też problemy z tym, ale udało mi się to, gdy zorientowałem się, jak działają ścieżki w UploadHandler.php: upload_dir i upload_url to jedyne ustawienia, na które należy spojrzeć, aby to działało. Sprawdź również dzienniki błędów serwera, aby uzyskać informacje dotyczące debugowania.
źródło
Sprawdź narzędzie do przesyłania obrazów z funkcją przeciągania i upuszczania z podglądem obrazu za pomocą wtyczki dropper jquery.
HTML
JS
CSS
Demo Jsfiddle
źródło
To dobra wtyczka Angular do przesyłania plików i jest darmowa!
przesyłanie plików kątowych
źródło
Przez jakiś czas walczyłem z tą wtyczką na Railsach, a potem ktoś ją naznaczył, unieważniając cały kod, który stworzyłem.
Chociaż wygląda na to, że nie używasz tego w Railsach, ale jeśli ktoś go używa, sprawdź ten klejnot . Źródło jest tutaj -> jQueryFileUpload Rails .
Aktualizacja:
Aby usatysfakcjonować komentującego zaktualizowałem swoją odpowiedź. Zasadniczo „ użyj tego klejnotu , oto kod źródłowy ”. Jeśli zniknie, zrób to daleko.
źródło
Cześć, spróbuj poniżej linku, jest to bardzo łatwe. Utknąłem przez długi czas i rozwiązałem mój problem w kilka minut. http://simpleupload.michaelcbrook.com/#examples
źródło
Droply.js jest do tego idealny. To proste i jest dostarczane w pakiecie z witryną demonstracyjną, która działa po wyjęciu z pudełka.
źródło
Możesz użyć uploadify to najlepsza wtyczka multiupload jquery, z której korzystałem.
Wdrożenie jest łatwe, obsługa przeglądarki jest doskonała.
źródło
Dla wtyczki UI, ze stroną jsp i Spring MVC ..
Przykładowy html . Musi znajdować się w elemencie formularza z atrybutem id funkcji fileupload
Przykładowe programy obsługi żądań przesyłania i usuwania
Przykładowa klasa do generowania wymaganej odpowiedzi JSON
Zobacz https://pitipata.blogspot.co.ke/2017/01/using-jquery-file-upload-ui.html
źródło