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: 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!');
	}
});

}