manipulating with files

[Matej]

Hello , what is the difference in manipulating with files with and without using new fileReader()?

Here are two examples from mozilla developers

 

using new fileReader() http://jsfiddle.net/4g65xq3f/

and without it and using window.URL.createObjectURL() http://jsfiddle.net/4g65xq3f/

 

what is the difference? (yes the second one is with hidden input but im not talking about it)

 

Thank you for answers and Merry Christmas and happy New Year

Edited December 26, 2014 by Matej

[Matej]

Sorry, didnt realize those two links were the same , here is code for second link

 

window.URL = window.URL || window.webkitURL;var fileSelect = document.getElementById("fileSelect"),fileElem = document.getElementById("fileElem"),fileList = document.getElementById("fileList");fileSelect.addEventListener("click", function (e) {if (fileElem) {fileElem.click();}e.preventDefault(); // prevent navigation to "#"}, false);function handleFiles(files) {if (!files.length) {fileList.innerHTML = "<p>No files selected!</p>";} else {var list = document.createElement("ul");for (var i = 0; i < files.length; i++) {var li = document.createElement("li");list.appendChild(li);var img = document.createElement("img");img.src = window.URL.createObjectURL(files[i]);img.height = 60;img.onload = function(e) {window.URL.revokeObjectURL(this.src);}li.appendChild(img);var info = document.createElement("span");info.innerHTML = files[i].name + ": " + files[i].size + " bytes";li.appendChild(info);}fileList.appendChild(list);}}