Különbségek

A kiválasztott változat és az aktuális verzió közötti különbségek a következők.

@@ Sor 1: / Sor 1: @@
+====== ====== Fotó feltöltése mobilról ====== ======
+Első körben meg kell győződni arról, hogy az aktuális eszköz támogatja-e a html alapú fájlfeltöltést. Ezt egyszerűen megtehetjük, ha írunk egy ehhez hasonló függvényt ennek kiderítésére (ez a részlet a Mondernizr pluginból származik) :
+function isUploadSupported() {
+    if (navigator.userAgent.match(/(Android (1.0|1.1|1.5|1.6|2.0|2.1))|(Windows Phone (OS 7|8.0))|(XBLWP)|(ZuneWP)|(w(eb)?OSBrowser)|(webOS)|(Kindle\/(1.0|2.0|2.5|3.0))/)) {
+        return false;
+    }
+    var elem = document.createElement('input');
+    elem.type = 'file';
+    return !elem.disabled;
+};
+Ha meggyőződtünk róla, hogy az eszköz támogatja a fájlfeltöltést, bővítsük a html-ünket az alábbi input taggel:
+''<input id="file" type="file" accept="image/*">''
+A gomb megnyomására a mobil felkínálja a lehetőséget, hogy válasszunk a memórián lévő fotók közül, vagy használjuk a kamerát új kép készítésére. Ha engedélyezni szeretnénk azt, hogy egyszerre több képet válasszon ki a user, akkor adjuk hozzá a fenti taghez a multiple attribútumot. Ügyeljünk arra, hogy amennyiben az eszközön iOS fut, a multiple attribútum megléte letiltja a kamera használatát a kép forrásaként.
+Ezek után írjuk meg a feltöltés megtörténte utáni teendőket - ellenőrizzük, hogy a feltöltött fájl valóban kép, illetve a html5 canvas apija segítségével szabjuk a képet tetszőleges méretűre.
+A feltöltött fájlunk validációját a html5 filereader apijável a legegyszerűbb véghez vinni, ehhez egy példakód:
+if (window.File && window.FileReader && window.FormData) {
+	var $inputField = $('#file');
+	$inputField.on('change', function (e) {
+		var file = e.target.files[0];
+		if (file) {
+			if (/^image\//i.test(file.type)) {
+				readFile(file);
+			} else {
+				alert('Not a valid image!');
+			}
+		}
+	});
+} else {
+	alert("File upload is not supported!");
+}
+function readFile(file) {
+	var reader = new FileReader();
+	reader.onloadend = function () {
+		processFile(reader.result, file.type);
+	}
+	reader.onerror = function () {
+		alert('There was an error reading the file!');
+	}
+	reader.readAsDataURL(file);
+}
+A filereader api mélyebb megértéséhez az alábbi dokumentáció átolvasása javasolt: [[https://developer.mozilla.org/en-US/docs/Web/API/FileReader|MDN]]
+Miután feldolgoztuk a fájlt, lehetőségünk nyílik azt testreszabni a canvas apival. Az alábbi példában azzal a korlátozással élünk, hogy a feltöltött kép legfeljebb 800pixel magas és 800 pixel széles lehet. Amennyiben valamelyik érték nagyobb ennél, a méretarány megtartásával lekicsinyítjük a fotót annyira, hogy megfeleljen a kritériumnak.
+function processFile(dataURL, fileType) {
+	var maxWidth = 800;
+	var maxHeight = 800;
+	var image = new Image();
+	image.src = dataURL;
+	image.onload = function () {
+		var width = image.width;
+		var height = image.height;
+		var shouldResize = (width > maxWidth) || (height > maxHeight);
+		if (!shouldResize) {
+			sendFile(dataURL);
+			return;
+		}
+		var newWidth;
+		var newHeight;
+		if (width > height) {
+			newHeight = height * (maxWidth / width);
+			newWidth = maxWidth;
+		} else {
+			newWidth = width * (maxHeight / height);
+			newHeight = maxHeight;
+		}
+		var canvas = document.createElement('canvas');
+		canvas.width = newWidth;
+		canvas.height = newHeight;
+		var context = canvas.getContext('2d');
+		context.drawImage(this, 0, 0, newWidth, newHeight);
+		dataURL = canvas.toDataURL(fileType);
+		sendFile(dataURL);
+	};
+	image.onerror = function () {
+		alert('There was an error processing your file!');
+	};
+}
+Ezek után a dolgunk már csak annyi, hogy megírjuk a függvényt, amely elküldi a kiválasztott képet/képeket a szervernek. Ehhez egy egyszerű jQuery ajax-hívást fogunk használni, íme:
+function sendFile(fileData) {
+	var formData = new FormData();
+	formData.append('imageData', fileData);
+	$.ajax({
+		type: 'POST',
+		url: '/your/upload/url',
+		data: formData,
+		contentType: false,
+		processData: false,
+		success: function (data) {
+			if (data.success) {
+				alert('Your file was successfully uploaded!');
+			} else {
+				alert('There was an error uploading your file!');
+			}
+		},
+		error: function (data) {
+			alert('There was an error uploading your file!');
+		}
+	});
+}

InnoStart Wiki

Felhasználói eszközök

Eszközök a webhelyen

Különbségek

Eszközök az oldalon