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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 08:19:45  来源:igfitidea点击:

get the data of uploaded file in javascript

javascripthtmlajaxfile-upload

提问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.