Question

我必须从文件中获取数据到我的文本框。我在Java Script尝试了很多但是没有解决方案可以帮助我。当我尝试从文件中获取数据时，我总是输出[object HTMLInputElement]。

如果我给fileinput.value，那么它会显示文件名。如果我添加fileinput，则会显示[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>

Answer 1

这可能对您有所帮助......它可以显示.text文件内容

    <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>

Answer 2

这JSFiddle可能会对您有所帮助。

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

将文件数据获取到HTML中的文本框

2 个答案: