我想在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>
答案 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.value
。 input type="file"
元素的值不是FileList
或File
对象
由于历史原因,
的名称value
IDL属性作为文件的前缀 使用字符串&#34; C:\ fakepath \&#34;
archive.files
将是FileList
对象,如果multiple
元素设置为input type="file"
元素,则可以从中迭代选定的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>
&#13;