CODEWITHSUNDEEP
javajavascripthtml
ashokramcse
ashokramcse

Reputation: 2861

Get File Data To the Text Box in HTML

I have to get data from the file to my text box. I have tried a lot in Java Script but no solution can some one help me out. I get output as [object HTMLInputElement] always when i try to get data from the file.

If i give fileinput.value then it shows File Name. If i add fileinput it shows [object HTMLInputElement]

<html>
<body> 
<script language='JavaScript' type='text/javascript'>

function BrowseButtonAction()
{
    var fileinput = document.getElementById('browse');
    fileinput.click();
}
function ChangeBrowseButton()
{
var fileinput = document.getElementById('browse');
var textinput = document.getElementById('filename');
textinput.value = fileinput.value;
}
</script>

<input type='text' id='filename' name='filename'/>
<input type='File' id='browse' name='fileupload' style='display: none' onChange='ChangeBrowseButton();'/>
<input type='button' value='File You need' id='fakeBrowse' onclick='BrowseButtonAction();'/>
</body>
</html>

Upvotes: 0

Views: 1753

Answers (2)

Rahul
Rahul

Reputation: 896

This JSFiddle might help you.

 fileinput.value isn't the correct way.Use HTML5 FileReader API.

Upvotes: 0

Prakash13
Prakash13

Reputation: 91

This might help you...It can show .txt file content

    <input type="file" id="fileinput" />

<script type="text/javascript">

  function readFile(evt) 
  {
    //Retrieve the file 
    var f = evt.target.files[0]; 

    if(f) 
    {
      var r = new FileReader();

      r.onload = function(e) 
      { 
          var contents = e.target.result;
          document.write(contents);
          // Set to the whatever textbox value
      }
      r.readAsText(f);
    }
    else 
    { 
        alert("Failed to load file");
    }
  }

  document.getElementById('fileinput').addEventListener('change', readFile, false);
</script>

Upvotes: 1

Related Questions