用户指定的文件名在Javascript中打开文件

时间:2016-03-23 18:12:45

标签: javascript html

我想在Javascript中打开一个用户从本地文件系统中选择的文件。我可以获取文件名,但我不知道如何打开它。

<form action='' method='POST' enctype='multipart/form-data'>
    <input id="archiveFile" type='file' name='userFile'><br>
    <script>
        archiveFile.onchange = function (e)
        {
            console.log(archiveFile.value);
            // open the file here
        }
    </script>
</form>

2 个答案:

答案 0 :(得分:1)

您需要HTML5 FileReader Api,有更多信息:https://developer.mozilla.org/en-US/docs/Web/API/FileReader

这是使用Flash的填充:https://github.com/Jahdrien/FileReader

这是一篇制作精良的文章:http://www.html5rocks.com/en/tutorials/file/dndfiles/#toc-reading-files 它解释了几乎所有的东西。

工作示例:

function FileReaderCtrl() {
  var self = this;
  var field = document.getElementById('fieldFile');
  var result = document.getElementById('result');
  
  self.readFile = function(event) {
    var res = event.target.result;
    var image = '<img src="'+ (res || '') +'"/>';
    result.innerHTML = image;
    console.log(image);
  };
  
  field.onchange = function(event) {
    var files = field.files;
    var reader;
    if(files.length < 1) {
      return;     
    }
    
    reader = new FileReader();
    reader.onload = self.readFile;
    reader.readAsDataURL(files[0]);
    
  }
}

document.addEventListener('DOMContentLoaded', FileReaderCtrl);
#result {
  width: 200px;
  height: 200px;
  
  background: lightcoral;
  margin: 1em auto;
}
img {max-width: 100% }
<label for="fieldFile">Select an Image:<br><input type="file" id="fieldFile"/></label>
<div id="result"></div>

答案 1 :(得分:1)

archiveFile.files替换为archiveFile.valueinput type="file"元素的值不是FileListFile对象

  

由于历史原因,value IDL属性作为文件的前缀   使用字符串&#34; C:\ fakepath \&#34;

的名称

archive.files将是FileList对象,如果multiple元素设置为input type="file"元素,则可以从中迭代选定的File个对象。例如,archiveFile.files[0]可以查看单个File对象的属性

&#13;
&#13;
<form action='' method='POST' enctype='multipart/form-data'>
  <input id="archiveFile" type='file' name='userFile'>
  <br>
  <script>
    archiveFile.onchange = function(e) {
      console.log(archiveFile.files, archiveFile.files[0]);
      // open the file here
    }
  </script>
</form>
&#13;
&#13;
&#13;