Html 在javascript中获取上传文件的数据
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16505333/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
get the data of uploaded file in javascript
提问by Dinoop Nair
I want to upload a csv file and process the data inside that file. What is the best method to do so? I prefer not to use php script. I did the following steps. But this method only returns the file name instead of file path.So i didnt get the desired output.
我想上传一个 csv 文件并处理该文件中的数据。这样做的最佳方法是什么？我不喜欢使用 php 脚本。我做了以下步骤。但是这个方法只返回文件名而不是文件路径。所以我没有得到想要的输出。
<form id='importPfForm'>
<input type='file' name='datafile' size='20'>
<input type='button' value='IMPORT' onclick='importPortfolioFunction()'/>
</form>
function importPortfolioFunction( arg ) {
var f = document.getElementById( 'importPfForm' );
var fileName= f.datafile.value;
}
So how can i get the data inside that file?
那么如何获取该文件中的数据呢？
采纳答案by Woody
you can use the new HTML 5 file api to read file contents
您可以使用新的 HTML 5 文件 api 来读取文件内容
https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications
https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications
but this won't work on every browser so you probably need a server side fallback.
但这不适用于每个浏览器，因此您可能需要服务器端回退。
回答by Andrew Murphy
The example below is based on the html5rocks solution. It uses the browser's FileReader() function. Newer browsers only.
下面的示例基于 html5rocks 解决方案。它使用浏览器的 FileReader() 函数。仅限较新的浏览器。
See http://www.html5rocks.com/en/tutorials/file/dndfiles/#toc-reading-files
见http://www.html5rocks.com/en/tutorials/file/dndfiles/#toc-reading-files
In this example, the user selects an HTML file. It uploaded into the <textarea>.
在此示例中，用户选择一个 HTML 文件。它上传到<textarea>.
<form enctype="multipart/form-data">
<input id="upload" type=file accept="text/html" name="files[]" size=30>
</form>
<textarea class="form-control" rows=35 cols=120 id="ms_word_filtered_html"></textarea>
<script>
function handleFileSelect(evt) {
var files = evt.target.files; // FileList object
// use the 1st file from the list
f = files[0];
var reader = new FileReader();
// Closure to capture the file information.
reader.onload = (function(theFile) {
return function(e) {
jQuery( '#ms_word_filtered_html' ).val( e.target.result );
};
})(f);
// Read in the image file as a data URL.
reader.readAsText(f);
}
document.getElementById('upload').addEventListener('change', handleFileSelect, false);
</script>
回答by Mark Lagendijk
The example below shows the basic usage of the FileReaderto read the contents of an uploaded file. Here is a working Plunker of this example.
下面的例子展示了FileReader读取上传文件内容的基本用法。这是此示例的工作 Plunker。
<!DOCTYPE html>
<html>
<head>
<script src="script.js"></script>
</head>
<body onload="init()">
<input id="fileInput" type="file" name="file" />
<pre id="fileContent"></pre>
</body>
</html>
script.js
脚本.js
function init(){
document.getElementById('fileInput').addEventListener('change', handleFileSelect, false);
}
function handleFileSelect(event){
const reader = new FileReader()
reader.onload = handleFileLoad;
reader.readAsText(event.target.files[0])
}
function handleFileLoad(event){
console.log(event);
document.getElementById('fileContent').textContent = event.target.result;
}
回答by Slawa
FileReaderJScan read the files for you. You get the file content inside onLoad(e)event handler as e.target.result.
FileReaderJS可以为您读取文件。您将onLoad(e)事件处理程序中的文件内容作为e.target.result.
