用 javascript 获取上传文件的数据

我想上传一个 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;
}

我怎样才能得到文件里的数据？

254442 次浏览
小开
最佳答案

您可以使用新的 HTML5文件 api 来读取文件内容

Https://developer.mozilla.org/en-us/docs/using_files_from_web_applications

但这并不适用于所有浏览器，所以您可能需要一个服务器端备份。

小开

下面的例子是基于 html5rock 解决方案。它使用浏览器的 FileReader ()函数。只有较新的浏览器。

参见 http://www.html5rocks.com/en/tutorials/file/dndfiles/#toc-reading-files

在这个例子中，用户选择一个 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) {
let files = evt.target.files; // FileList object


// use the 1st file from the list
let f = files[0];
    

let 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>
小开

FileReaderJS 可以为您读取文件。

小开

下面的示例显示了 FileReader读取上载文件.下面是这个例子的一个工作 Plunker。的内容的基本用法

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;
}
<!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>

小开

试试这个

document.getElementById('myfile').addEventListener('change', function() {




var GetFile = new FileReader();
        

GetFile .onload=function(){
                

// DO Somthing
document.getElementById('output').value= GetFile.result;
        

        

}
            

GetFile.readAsText(this.files[0]);
})
    <input type="file"  id="myfile">




<textarea id="output"  rows="4" cols="50"></textarea>

小开

在 blob 本身上存在一些新的工具，您可以使用这些工具来读取文件内容，作为一种承诺，这将使您不必使用遗留的 FileReader

// What you need to listen for on the file input
function fileInputChange (evt) {
for (let file of evt.target.files) {
read(file)
}
}


async function read(file) {
// Read the file as text
console.log(await file.text())
// Read the file as ArrayBuffer to handle binary data
console.log(new Uint8Array(await file.arrayBuffer()))
// Abuse response to read json data
console.log(await new Response(file).json())
// Read large data chunk by chunk
console.log(file.stream())
}


read(new File(['{"data": "abc"}'], 'sample.json'))


提交答案