I have the following JS / HTML code:
<input type="text" class="file" name="file_info" id="file_info">
<div class="file_upload">
<input type="file" id="file_upload" onchange="name();">
</div>
<script>
function name() {
var fileName = document.getElementById("file_upload").value;
var fnSplit = fileName.split(/[\/\\]/);
fileName = fnSplit[fnSplit.length - 1];
document.getElementById('file_info').innerHTML = 'Fred Flinstone';
}
</script>
I want that after I upload file, the file-name will shown in the tput text, but this cide doesn't work.
How can I fix it?
Update : The file name should be inside the input text
I have the following JS / HTML code:
<input type="text" class="file" name="file_info" id="file_info">
<div class="file_upload">
<input type="file" id="file_upload" onchange="name();">
</div>
<script>
function name() {
var fileName = document.getElementById("file_upload").value;
var fnSplit = fileName.split(/[\/\\]/);
fileName = fnSplit[fnSplit.length - 1];
document.getElementById('file_info').innerHTML = 'Fred Flinstone';
}
</script>
I want that after I upload file, the file-name will shown in the tput text, but this cide doesn't work.
How can I fix it?
Update : The file name should be inside the input text
Share Improve this question edited Aug 23, 2020 at 8:31 Brian Tompsett - 汤莱恩 5,89372 gold badges61 silver badges133 bronze badges asked Jul 13, 2013 at 14:53 Nave TsevaNave Tseva 8789 gold badges25 silver badges47 bronze badges 1- 2 I don't think you are supposed to use innerHTML on input elements – jonhopkins Commented Jul 13, 2013 at 15:00
3 Answers
Reset to default 3Move your script element before the input element. You had better put the script element inside your head like this
Demo
Have update the answer!
You can try this code:
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
var fileName =document.getElementById("file_upload").value;
var fnSplit = fileName.split(/[\/\\]/);
fileName = fnSplit[fnSplit.length - 1];
document.getElementById('file_info').value = fileName
}
</script>
</head>
<body>
<input type="text" class="file" name="file_info" id="file_info">
<div class="file_upload">
<input type="file" id="file_upload" onchange="myFunction();">
</div>
</body>
</html>
Do it like this:
HTML
<div class="file_upload">
<input type="file" id="file_upload">
</div>
<div id="file_info"></div>
JS
function name(file) {
var reader = new FileReader();
reader.readAsText(file);
reader.onload = function (event) {
document.getElementById('file_info').innerHTML = "Filename: " + file.name + "\nContent: " + event.target.result;
};
reader.onerror = function () {
alert('Unable to read ' + file.name);
};
}
document.getElementById('file_upload').onchange = function () {
name(this.files[0]);
};