[英]Open file in Javascript from user-specified file name
我想用用戶從本地文件系統中選擇的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>
您需要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>
用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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.