Friday, 1 July 2016

How to show file name when user select a file

<!DOCTYPE html>
<html>
<body onload="myFunction()">

<input type="file" id="myFile" multiple size="50" onchange="myFunction()">

<p id="demo"></p>
   
<script>
function myFunction(){
    var x = document.getElementById("myFile");
    var txt = "";  
    txt  +=  x.value; 
    document.getElementById("demo").innerHTML = txt;
}
</script>



</body>
</html>


------------------------------------------------------or-----------------------------------------------------------


<!DOCTYPE html>
<html>
<body>

<input type="file" id="myFile" multiple size="50">

<p id="demo"></p>

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">

    $(document).ready(function(){

        $('input[type="file"]').change(function(e){

            var fileName = e.target.files[0].name;

            document.getElementById("demo").innerHTML = fileName;

        });

    });

</script>



</body>
</html>

No comments:

Post a Comment