Witam,
dziś postanowiłem spróbować swych sił w napisaniu pluginu jQuery. Jest to mój pierwszy plugin tak więc wszelkie uwagi mile widziane. Docelowo planuję dołożyć obsługę zdarzeń by móc dowolnie reagować na określone sytuacje.

Zadaniem pluginu jest upload plików graficznych z podglądem pliku po wgraniu. Całość działa na zasadzie wysyłania dynamicznie tworzonych formularzy do ramek pływających (oba elementy ukryte). Skrypt cyklicznie sprawdza zawartość ramki, w której pojawia się odpowiedź w postaci JSON. Odpowiedź błędna zawiera komunikat błędu, natomiast poprawna ścieżkę do wgranego zdjęcia.

Po wgraniu plików na serwer ich nazwy zawarte są w ukrytych polach o takich samych nazwach, jak nazwy pól typu file. Zatem po wysłaniu formularza (uzupełnionego np. o inne dane) otrzymujemy również ścieżki do wcześniej wgranych plików, dzięki czemu można je przenieść w konkretne miejsce.

Demo znajduje się tutaj:
http://notifero.pl/ntfrUploadPreview/

Kod pluginu:

[JAVASCRIPT] pobierz, plaintext 
/**
 * Plugin uploadu plików graficznych z podglądem.
 *
 * @author Michał "phpion" Płonka
 */
(function($){
	var counter = 0;
 
	var methods = {
		init: function(options) {
			var settings = $.extend( {
				field: 'ntfrUploadPreview_file', // Nazwa pola z plikiem.
				preview: 'img/t.png', // Domyślny plik podglądu.
				uploader: 'ntfrUploadPreview_uploader.php', // Skrypt uploadu.
				timeout: 250 // Czas cyklicznego odczytywania zawartości ramki.
			}, options);
 
			return this.each(function() {
				var $this = $(this);
 
				// Ustalenie ID elementu.
				var id = $this.attr('id');
 
				if (typeof id == 'undefined' || id == false) {
					id = 'ntfrUploadPreview_' + (++counter);
					$this.attr('id', id);
				}
				//
 
				// Utworzenie elementu podglądu.
				var preview = '<div id="' + id + '_preview" class="ntfrUploadPreview_preview">';
				preview += '<img src="' + settings.preview + '" alt="' + settings.preview + '" id="' + id + '_uploader_preview" />';
				preview += '<input type="hidden" name="' + $this.attr('name') + '" id="' + id + '_uploader_file" />';
				preview += '</div>';
 
				$(preview).insertAfter($this);
				//
 
				// Utworzenie elementów uploadera.
				var uploader = '<div id="' + id + '_uploader" class="ntfrUploadPreview_uploader">';
				uploader += '<form action="' + settings.uploader + '" method="post" id="' + id + '_uploader_form" target="' + id + '_uploader_iframe" enctype="multipart/form-data">';
				uploader += '<fieldset></fieldset>';
				uploader += '</form>';
				uploader += '<iframe src="" name="' + id + '_uploader_iframe" id="' + id + '_uploader_iframe"></iframe>';
				uploader += '</div>';
 
				$("body").append(uploader);
				//
 
				// Zmiana nazwy pola.
				$this.attr('name', settings.field);
				//
 
				// Przypisanie zdarzenia onchange.
				$this.change(function() {
					var $this = $(this);
					var id = $this.attr('id');
 
					// Wyczyszczenie zawartości ramki.
					document.getElementById(id + '_uploader_iframe').contentWindow.document.body.innerHTML = '';
					//
 
					// Utworzenie klona pola.
					var clone = $this.clone();
					clone
						.val('')
						.attr('id', id + '_clone')
						.attr('disabled', 'disabled')
					;
					clone.insertBefore('#' + id + '_preview');
					//
 
					// Dodanie pola i wysłanie formularza do ramki.
					$('#' + id + '_uploader_form fieldset').append($this);
					$('#' + id + '_uploader_form').submit();
					//
 
					// Odbieranie odpowiedzi jako zawartości ramki.
					catchUploadResponse = function() {
						var id = $this.attr('id');
						var response = document.getElementById(id + '_uploader_iframe').contentWindow.document.body.innerHTML;
 
						if (response.length > 0) {
							response = $.parseJSON(response);
 
							if (response.status == 1) {
								// Aktualizacja podglądu wgranego zdjęcia.
								$('#' + id + '_uploader_preview')
									.attr('src', response.message)
									.attr('alt', response.message)
								;
								//
 
								// Aktualizacja wartości pola z nazwą pliku.
								$('#' + id + '_uploader_file').val(response.message);
								//
							}
							else {
								alert(response.message);
							}
 
							// Przywrócenie pola do formy wyjściowej.
							$('#' + id + '_clone').remove();
							$this.val('');
							$this.insertBefore('#' + id + '_preview');
							//
						}
						else {
							setTimeout('catchUploadResponse()', settings.timeout);
						}
					};
 
					catchUploadResponse();
					//
				});
			});
		}
	};
 
	$.fn.ntfrUploadPreview = function(method) {
		if (methods[method]) {
			return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
		} else if (typeof method === 'object' || !method) {
			return methods.init.apply(this, arguments);
		} else {
			$.error('Method ' + method + ' does not exist on jQuery.ntfrUploadPreview');
		}
	};
})(jQuery);
[JAVASCRIPT] pobierz, plaintext 

Kod pliku uploadu:

[PHP] pobierz, plaintext 
<?php
$file = 'ntfrUploadPreview_file'; // Nazwa pola z plikiem.
 
$response = array(
	'status' => 0,
	'message' => ''
);
 
if (isset($_FILES[$file]) && is_array($_FILES[$file]) && array_key_exists('error', $_FILES[$file]) && $_FILES[$file]['error'] == UPLOAD_ERR_OK) {
	$path_rel = 'upload/'.time().'_'.$_FILES[$file]['name']; // Ścieżka relatywna.
	$path_abs = pathinfo(__FILE__, PATHINFO_DIRNAME).DIRECTORY_SEPARATOR.$path_rel; // Ścieżka absolutna.
 
	if (in_array(strtolower(pathinfo($_FILES[$file]['name'], PATHINFO_EXTENSION)), array('jpg', 'jpeg', 'png', 'gif'))) {
		if (@move_uploaded_file($_FILES[$file]['tmp_name'], $path_abs)) {
			$response = array(
				'status' => 1,
				'message' => $path_rel
			);
		}
		else {
			$response['message'] = 'Błąd podczas wgrywania pliku.';
		}
	}
	else {
		$response['message'] = 'Wybrany plik powinien być plikiem typu *.jpg, *.png lub *.gif.';
	}
}
else {
	$response['message'] = 'Brak pliku.';
}
 
echo json_encode($response);
[PHP] pobierz, plaintext 

Zapraszam do testowania i zgłaszania swoich uwag

Moja taka uwaga, jesli wgrywam plik o rozszerzeniu gif, to moze by po prostu wyjmowac z niego pierwsza klatke, a nie skalowac caly plik. Poza tym przez pomylke wybieram inny plik i musze czekac az sie wgra bez mozliwosci anulowania (pole sie zmienia w disabled). Ogolnie bardzo fajne : )

Jak dla mnie taki skrypt powinien posiadać:
- Pasek postępu
- Multi upload
- Możliwość przerwania wysyłania
- W polu powinna pojawić się notka z nazwą wgrywanego pliku lub ścieżką jego dostępu

Nie wiem czy to wszystko jest realne do wykonania, bo gdzieś czytałem o potrzebie zastosowania flasha do postępu, ale jak się za to zabierasz to podałem kilka todo. :-)

To co już napisałeś działa zgrabnie!

Dzięki za pierwsze opinie.


To co zrobisz po stronie skryptu PHP to Twoja sprawa. Jest to totalny przykład. W odpowiedzi musisz zwrócić ścieżkę do pliku do wyświetlenia. Jest ona podstawiana pod src obrazka podglądu.


No tak, pomyślę o tym.


- Nierealne, do tego trzeba stosować cuda w postaci chociażby Flasha, a chcę tego uniknąć. Jedyne co będzie można zrobić to podstawienie jakiegoś animowanego gifa symbolizującego wgrywanie pliku. No ale to prawdopodobnie zrobię jako zdarzenie.
- Też nierealne. Główną ideą było podpięcie się pod zwykłe pola input type="file" bez konieczności jakichkolwiek dodatkowych modyfikacji. Wybieranie pliku po kliknięciu w to pole nie umożliwia wyboru kilku plików czy wręcz całego katalogu.
- Zgadza się, o tym samym pisał prowseed.
- W sumie nazwa pliku pojawia się w polu wyboru pliku - tak, jak w przypadku zwykłego pola wyboru pliku. Również rozważę to jako zdarzenia umożliwiając dowolną operację na otrzymanej odpowiedzi.

A o html5 słyszałeś? Jest multiupload, paski postępu, do wyboru do koloru.

Dopóki HTML5 nie będzie powszechnym standardem pozostanę przy dotychczasowych rozwiązaniach.

Powszechnym standardem? To się już stare robi i jest w ogólnym użytku od bardzo dawna. Poza tym kto Ci broni zrobić progressbar tradycyjnie? Html5 daje tylko znaczniki w tym zakresie i nic więcej, równie dobrze możesz zrobić to na div. Multiupload jest stosowany, Ty masz go tylko obsłużyć a nie się na nim opierać.

Co do postępu to wiem, że wymaga flash'a, ale multi upload jest i funkcjonuje dobrze bez tego typu "ficzerów" - nie jestem znawcą więc może głupoty prawię, nigdy się tym nie zajmowałem, nie mniej jednak od systemu uploadu właśnie tego wymagam i jeśli coś potrzebuje flash'a to z niego bym korzystał jest to na prawdę wielki plus! :-)

Ps. Gmail ma fajnie zaimplementowany upload, tak jak w moim mniemaniu powinien wyglądać ideał.

Od kiedy? Skoro używasz jQ to użyj jQ. http://t.wits.sg/misc/jQueryProgressBar/demo.php i wiele innych.