InnoStart Wiki

Ez az oldal csak olvasható. Megtekintheted a forrását, de nem változtathatod meg. Ha úgy gondolod, hogy ez helytelen, kérdezd az Adminisztrátorokat!
====== ====== 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

Eszközök az oldalon
