HTML5 APPLICATIONS DEVELOPMENT MANUAL (2016)

30 - Loading and Saving Files

Validating Uploaded Files

With JavaScript you can load and save files from your computer.

JavaScript can also be used to validate a file type.

Example: Users should upload a .jpg file, but try to upload a .doc file instead

<!doctype html>

<html>

<head>

<title>JavaScript accesses local files</title>

function acknowledge(file_handle) {

var size = file_handle.size;

var fname = file_handle.name;

var message = "You have chosen the file '" +

fname + "'. This appears to be a recognizable image, totaling " + size + " bytes in size.";

alert(message);

}

function complain(fname) {

var message = "The file named '" + fname + "'does not appear to have an acceptable extension.";

alert(message);

}

function handle_file_selection(item) {

var f = item.files[0];

var fname = f.name;

var last_index = fname.lastIndexOf('.');

if (last_index == -1) {

complain(fname);

return;

}

var ext = fname.substr(last_index + 1);

if (ext.toLowerCase() in { 'gif': '', 'jpg': '', 'png': '', 'tif': '' }) {

acknowledge(f);

} else {

complain(fname);

}

</script>

</head>

<body>

<h1>JavaScript accesses local files</h1>

<input type='file'

onchange='handle_file_selection(this);' />

</body>

</html>

AppCache for Offline Files

Data can be stored locally when a user is offline using the Application Cache, or AppCache.

AppCache stores resources, such as HTML, CSS, and JavaScript files, locally on a user’s machine. As a result, users can access Web pages and apps offline.

The cache manifest file dictates which type of information is stored offline.

<!doctype html>

<head>

<title>Minimal AppCache example</title>

</head>

<body>

<h1>Minimal AppCache example</h1>

<p>This page should reload after disconnecting from the Internet and refreshing the Web page. </p>

</body>

</html>

Validating User Input

Form input may be incorrect.

Example: Users may forget the @ symbol in an email address.

JavaScript can be used to perform client-side validation of form input. This occurs in the browser before a form is submitted.

NOTE: With HTML5, client-side validation is performed based on the input type

<!doctype html>

<html>

<head>

<title>Form management</title>

function correct() {

var input_object =

document.getElementById("serial");

var value = input_object.value;

var current_length = value.length;

if (current_length) {

var last_character =

value.substring(current_length - 1);

switch (current_length) {

case 4:

case 8:

case 11:

if (last_character != '-') {

value = value.substring(0,

current_length - 1);

}

break;

default:

if (!/\d/.test(last_character)) {

value = value.substring(0,

current_length - 1);

}

if (current_length > 12) {

value = value.substring(0, current_length

- 1);

}

current_length = value.length;

switch (current_length) {

case 3:

case 7:

case 10:

value += "-";

}

input_object.value = value;

}

</script>

</head>

<body>

<h1>Form management</h1>

<form>

Enter here a serial number in the pattern XXX-XXX-XXX, where each X is a digit: <input id="serial" type='text' size='12' onkeyup="correct();">.

</form>

</body>

</html>

Cookies

Cookies are small text files that that Web sites save on your computer. They contain information about you and your preferences. With JavaScript you can store and retrieve information from cookies.

<!doctype html>

<html>

<head>

<title>Use of cookies</title>

function getCookie(c_name) {

var i, x, y, ARRcookies = document.cookie.split(";");

for (i = 0; i < ARRcookies.length; i++) {

x = ARRcookies[i].substr(0, ARRcookies[i].indexOf("="));

y = ARRcookies[i].substr(ARRcookies[i].indexOf("=") + 1);

x = x.replace(/^\s+|\s+$/g, "");

if (x == c_name) {

return unescape(y);

}

function init() {

var message;

level_object = document.getElementById("level");

var welcome = document.getElementById("welcome");

var level = getCookie("level");

if (level == null || level == '') {

message = "It appears this is your first time to play. You will start at level 1.";

level = 1;

} else {

message = "When you last played, you reached level " + level + ". You will start there now.";

}

welcome.innerHTML = message;

level_object.value = level;

}

function save_level() {

setCookie("level", level_object.value, 10);

}

function setCookie(c_name, value, exdays) {

var exdate = new Date();

exdate.setDate(exdate.getDate() + exdays);

var c_value = escape(value) + ((exdays == null) ? "" : "; expires=" + exdate.toUTCString());

document.cookie = c_name + "=" + c_value;

}

</script>

</head>

<h1>Use of cookies</h1>

<p id="welcome">Welcome.</p>

<form>

You can update your level at any time. It is currently set at <input id="level" type="number" min="1" max="100" oninput="save_level();" />.

</form>

</body>

</html>

Local Storage

Cookies are limited in the information they store, and therefore in the effects programming with them can achieve. Plus, cookies pose a threat to data privacy. HTML5 provides local storage to make personalization easier to program and more capable.

<!doctype html>

<html>

<head>

<title>Use of local storage</title>

function init() {

var message;

level_object = document.getElementById("level");

var welcome = document.getElementById("welcome");

var level = localStorage.level;

if (level == null || level == '') {

message = "It appears this is your first time to play. You will start at level 1."; level = 1;

} else {

message = "When you last played, you reached level " + level + ". You will start there now.";

}

welcome.innerHTML = message;

level_object.value = level;

}

function save_level() {

localStorage.level = level_object.value;

}

</script>

</head>

<h1>Use of local storage</h1>

<p id="welcome">Welcome.</p>

<form>

You can update your level at any time. It is currently set at <input id="level" type="number" min="1" max="100" oninput="save_level();" />.

</form>

</body>

</html>