下面的例子基于html5rocks解决方案，它使用了浏览器的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="upload_file"></textarea>

<script>
function handle_file_select( evt ) {
    console.info ( "[Event] file chooser" );

    let fl_files = evt.target.files; // JS FileList object

    // use the 1st file from the list
    let fl_file = fl_files[0];

    let reader = new FileReader(); // built in API

    let display_file = ( e ) => { // set the contents of the <textarea>
        console.info( '. . got: ', e.target.result.length, e );
        document.getElementById( 'upload_file' ).innerHTML = e.target.result;
        };

    let on_reader_load = ( fl ) => {
        console.info( '. file reader load', fl );
        return display_file; // a function
        };

    // Closure to capture the file information.
    reader.onload = on_reader_load( fl_file );

    // Read the file as text.
    reader.readAsText( fl_file );
    }

// add a function to call when the <input type=file> status changes, but don't "submit" the form
document.getElementById( 'upload' ).addEventListener( 'change', handle_file_select, false );
</script>

字符串

您可以使用新的HTML 5文件API读取文件内容
https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications
但这并不适用于所有浏览器，所以你可能需要一个服务器端回退。

下面的示例显示了FileReader读取上传文件内容的基本用法。Here is a working Plunker of this example.

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

个字符

在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'))

字符串

试试这个

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]);
        })

个字符

FileReaderJS可以读取文件。您可以在onLoad(e)事件处理程序中以e.target.result的形式获取文件内容。