Design HTML, CSS & Javascript

Advanced HTML

Upload Forms

When uploading binary data (images, files, videos, audio etc) be sure your file upload form contains the enctype=“multipart/form-data” attribute.

If the form expects large files to be uploaded be sure to include a hidden input field that indicates the maximum file size expected by server. This saves users from uploading large files just for the server to respond with an error because the file is larger than the expected input. This feature is not officially supported by HTML spec meaning that browsers don’t care about it, it is regarded as good practice especially in the PHP community. Always verify the file size server side.

Example upload form that includes the above:

<!-- The data encoding type, enctype, MUST be specified as below -->
<form enctype="multipart/form-data" action="__URL__" method="POST">
    <!-- MAX_FILE_SIZE must precede the file input field -->
    <input type="hidden" name="MAX_FILE_SIZE" value="30000" />
    Send this file: <input name="userfile" type="file" />
    <input type="submit" value="Send File" />
</form>

example borrowed from PHP docs

Copying A Javascript Array

Javascript Arrays are Objects, Objects are passed by reference every change in the original object effects all copies and vice versa.

var original = [1, 2, 3, 4, 5];
var copy = original;

original.push(6);
console.log(original); // [ 1, 2, 3, 4, 5, 6 ]
console.log(copy);     // [ 1, 2, 3, 4, 5, 6 ]

This type of copy is known as a Shalow Copy, if an array needs to be totaly copied without references a Deep Copy is required:

var original = [1, 2, 3, 4, 5];
var copy = [];

for(var i = 0; i < original.length; i++) {
    copy[i] = original[i];
}

original.push(6);
console.log(copy); // [ 1, 2, 3, 4, 5 ]

Other Ways To Deep Copy

Using concat()

var original = [1, 2, 3, 4, 5];
var copy = original.concat([]);

original.push(6);
console.log(original); // 1,2,3,4,5,6
console.log(copy);     // 1,2,3,4,5

Using slice()

var original = [1, 2, 3, 4, 5];
var copy = original.slice(0);

original.push(6);
console.log(original); // 1,2,3,4,5,6
console.log(copy);     // 1,2,3,4,5

Using splice() (mutates the original)

var original = [1, 2, 3, 4, 5];
var copy = original.splice(0);

original.push(6);
console.log(original); // 6
console.log(copy);     // 1,2,3,4,5

[home] | Emancipation through technology |