Ajax-Bild-Upload (mit weniger Mist)

Wie laden Sie Bilder jetzt hoch?

Sie wählen eine Datei aus und klicken auf Hochladen. Ganz einfach, oder? Nur, sobald Sie Ihr Bild ausgewählt haben, können Sie nicht mehr sehen, was ausgewählt wurde. Der Dateiname steht am Ende des Eingabefelds, und wenn das Feld kurz ist oder der Dateipfad lang, sehen Sie nichts Nützliches. Sie vergessen, was Sie ausgewählt haben und haben keine Ahnung, was Sie hochladen werden. „Moment, habe ich ein Bild von meinem Gesicht hochgeladen oder etwas weniger Professionelles?“

Machen wir es besser.

Der Schlüssel ist eine Bildvorschau, die angezeigt wird, bevor der Benutzer sie speichern muss. Wir verzichten also auf den Upload-Button zugunsten eines Speicher-Buttons. Wenn nun eine Datei über die Dateiauswahl ausgewählt wird, wird etwas AJAX ausgelöst. Das Bild wird serverseitig verarbeitet und ein Miniaturbild wird auf die bestehende Seite geladen.

Fühlt sich das nicht viel besser an? Wir haben jetzt eine visuelle Darstellung (stellen Sie sich das vor) des ausgewählten Bildes.

Dies ist besonders nützlich in größeren Formularen, bei denen viele Felder mit einer einzigen Aktion übermittelt werden. Es ermöglicht dem Benutzer, das Formular zu überprüfen, bevor er auf Speichern klickt, und zu sehen, welches Bild (oder welche Bilder) er ausgewählt hat.

So funktioniert's

Neugierig, wie das gemacht wird? Hier ist der Code.

Wir können ein Standard-HTML-Formular verwenden. Dies sowie ein Bereich für die Bildvorschau werden wir einbinden.

<div id="upload-area">
	<div id="preview">
		<img width="100px" height="100px" src="/images/icons/128px/zurb.png" id="thumb">
	</div>

	<form action="/playground/ajax_upload" id="newHotnessForm">
		<label>Upload a Picture of Yourself</label>
		<input type="file" size="20" id="imageUpload" class=" ">
		<button class="button" type="submit">Save</button>
	</form>
</div>

Die Aktion des Formulars sollte auf einen Ort zeigen, der das Hochladen des Bildes verarbeitet, unabhängig davon, ob JavaScript vorhanden ist oder nicht. Sie sollten auch in Erwägung ziehen, die Markup für die Vorschau nur per JavaScript hinzuzufügen, da dies ohne JS nicht funktionieren würde.

Sie benötigen jQuery und das AJAX Upload jQuery Plugin von Andrew Valums. Binden Sie diese ein und stellen Sie sicher, dass jQuery zuerst geladen wird. Beachten Sie, dass das AJAX Upload Plugin einige Konfigurationen und serverseitige Komponenten benötigt, um zu funktionieren. Weitere Details finden Sie unter diesem Link.

<script src="/js/jquery.min.js" type="text/javascript"></script>
<script src="/js/ajaxupload.js" type="text/javascript"></script>

Hier ist der JavaScript-Code, den wir vollständig hinzufügen werden.

$(document).ready(function(){

	var thumb = $('#thumb');	

	new AjaxUpload('imageUpload', {
		action: $('#newHotnessForm').attr('action'),
		name: 'image',
		onSubmit: function(file, extension) {
			$('#preview').addClass('loading');
		},
		onComplete: function(file, response) {
			thumb.load(function(){
				$('#preview').removeClass('loading');
				thumb.unbind();
			});
			thumb.attr('src', response);
		}
	});
});

Hier ist das Ganze in einfacher Sprache

1. Plugin-Verhalten auf das Dateieingabefeld anwenden
2. Die Aktions-URL angeben, die entsprechend aus der Aktions-URL im Markup gezogen wird
3. Wenn eine Datei ausgewählt wird, sofort eine Klasse namens „loading“ zum Vorschau-Bereich hinzufügen. Diese Klasse verbirgt das Bild durch CSS (z.B..loading img { display: none; }und wendet ein Hintergrundbild an (ein Spinner)
4. Nach erfolgreichem AJAX dieloadingKlasse entfernen und diesrcdes Bildes auf die Antwort-URL setzen, die das Plugin zurückgibt.

Nur Vorschau

Beachten Sie, dass der obige Code nur die Vorschaufunktion behandelt. Das Dateieingabefeld enthält immer noch den korrekten Dateipfad. Wenn der Benutzer also auf die Schaltfläche „Speichern“ klickt, muss das Formular immer noch von der serverseitigen Technologie verarbeitet und behandelt werden, die Sie dafür bereitstellen. Ja, Sie laden das Bild im Wesentlichen einmal hoch (für die Vorschau) und dann noch einmal (um es dauerhafter zu speichern).

Bei der Einrichtung/Konfiguration des Plugins legen Sie ein Verzeichnis für ein serverseitiges Skript fest, das hochgeladene Bilder speichert. Möglicherweise möchten Sie, dass dieses Verzeichnis unter etwas wie/images/temp/liegt. So wissen Sie, dass alles, was in dieses Verzeichnis hochgeladen wird, temporär ist und vorübergehend bereinigt werden kann, um den Server sauber zu halten. Ein CRON-Job zum Leeren dieses Verzeichnisses wäre eine gute Idee.

Demo

Eine funktionierende Demo ist auf der ZURB-Website verfügbar, die auch weitere schriftliche Informationen enthält. Aufgrund der serverseitigen Verarbeitung ist ein Download leider nicht praktikabel.

Demo ansehen