通过用户指定的文件名以Javascript打开文件

Question

我想用用户从本地文件系统中选择的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>

Answer 1

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

这是使用Flash的polyfill： https : //github.com/Jahdrien/FileReader

这是一篇非常出色的文章： http : //www.html5rocks.com/zh-cn/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> 

Answer 2

用archiveFile.files代替archiveFile.value 。 input type="file"元素的值不是FileList或File对象

由于历史原因， value IDL属性在文件名前加上字符串“ C：\\ fakepath \\”

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

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