In my HTML i select multiple files.
<input type="file" id="img" multiple>
I want to store each element in an array so that i can print the file source.
I have done this in my javascript but it does not work.
function loadfiles()
{
var x=document.getElementById("img");
for (var i=0;i<x.length;i++)
{
document.write(x.elements[i].src);
}
}
Tip: For <input type="file"> : To select multiple files, hold down the CTRL or SHIFT key while selecting. Tip: For <input type="email"> : Separate each email with a comma, like: [email protected], [email protected], [email protected] in the email field.
For limiting maximum items on multiple inputs, use JavaScript. Through this, limit the number of files to be uploaded. For example, let's say only 2 files to be uploaded at once. You can try to run the following code to learn how to use multiple attributes in HTML.
In HTML, we will use the type attribute to take input in a form and when we have to take the file as an input, the file value of the type attribute allows us to define an element for the file uploads.
The <input type="file"> defines a file-select field and a "Browse" button for file uploads. To define a file-select field that allows multiple files to be selected, add the multiple attribute. Tip: Always add the <label> tag for best accessibility practices!
The property files
gets you an array of all the files selected by the file input. So the loadfiles function should be modified to following:
function loadfiles()
{
var imageFiles = document.getElementById("img"),
filesLength = imageFiles.files.length;
for (var i = 0; i < filesLength; i++) {
document.write(imageFiles.files[i].name);
}
}
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/
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With