onChange Input with Javascript
Question
I have this code:
<input type="file" onchange="showUrl(this.value)" name="upload[]" multiple="multiple">
<button type="button" class="btn btn-success"><i class="icon icon-plus"></i> Add file</button></span>
<input type="submit" class="btn btn-primary" value="Upload"><br><br><span id="url"></span>
and this javascript function
function showUrl(url) {
document.getElementById("url").innerHTML = url;
}
I want to show the url of every file that the user selects with "input file" button. The function shows only the url of the first file. Someone can help me? Thanks
4 answers
solution1
2 2015-08-25 19:04:07
First, change your input to:
<input type="file" onchange="showUrl(this)" name="upload[]" multiple="multiple">
Then, change your JS to:
function showUrl(url) {
for(var i = 0; i < url.files.length; i++) {
document.getElementById("url").innerHTML += url.files[i].name;
}
}
That way you will be able to read all files selected on the files input.
solution2
1 2015-08-25 19:11:59
I don't think you can get the full path, but you can get the file's name by passing this.files instead of this.value
function showUrl(url) {
for(var i = 0; i < url.length; i++)
{
document.getElementById("url").innerHTML += url[i].name + "<br>";
}
}
solution3
1 ACCPTED 2015-08-25 19:13:24
Javascript
<script type="text/javascript">
function showUrl() {
var allFiles = document.getElementById("myFiles");
if ('files' in allFiles) {
if (allFiles.files.length > 0) {
for (var i = 0; i < allFiles.files.length; i++) {
document.getElementById("url").innerHTML += "<br />"+allFiles.files[i].name;
// note you can mess with proprieties here, like 'size'
}
}
}
}
</script>
HTML
<body>
<input type="file" onchange="showUrl()" name="upload[]" id="myFiles" multiple="multiple">
<button type="button" class="btn btn-success"><i class="icon icon-plus"></i> Add file</button></span>
<input type="submit" class="btn btn-primary" value="Upload">
<br /><br />
<span id="url"></span>
</body>
solution4
0 2015-08-25 18:59:32
I'm not sure of what you're after. try:
function showUrl(url) {
document.getElementById("url").innerHTML += url;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.