DOM documentation (Mozilla):
element = document.getElementById(id);
where
element
is a reference to an Element object, or null if an element with the specified ID is not in the document.
id
is a case-sensitive string representing the unique ID of the element being sought.
In your code document.getElementById(id)
returns a single element and not a list.
To access the files added to the input take a look at the HTML5 Files API.
var f = (document.getElementById('img').files);
for (var i =0; i < f.length; i++){
var new_div = document.createElement('div');
new_div.innerHTML = f[i].name;
document.body.appendChild(new_div);
}
FYI: Using document.write()
is extremely dangerous, and should be avoided. For more read this stackoverflow Q&A: Why is document.write considered a "bad practice"?
In the example above I substituted document.write
with document.body.appendChild
Fiddle (with jQuery): http://jsfiddle.net/4Yq4F/
Getting the complete file path
This is in your response requesting for the complete file path of the files. Unfortunately due to security reasons this is not possible as of now. Mozilla Firefox browsers however will provide you with the complete file path with the mozFullPath
attribute. If you want to use it, in the above example substitute f[i].name
with f[i].mozFullPath