如何获取使用浏览按钮选择的文件的内容？

Question

您创建一个浏览按钮并让用户浏览目录，直到他选择一个文件。整个路径和文件名将显示在浏览按钮组合的文本元素中。那么，我该如何打开该文件来提取数据并对其执行操作？

这是多远我这个有：

<div id="browseFile" style="z-index: 1; left:-1040px; width:400px"> 
     <input id="browse4File" name="/static/Import/Example Portfolio 1.csv" type="file" accept="text/plain" maxlength="200" style="left:20px; width: 200px;" /><br/> 
     <span style="position:relative;top:72px; left:320px; top:73px;"> 
      <!--<button type="button" onclick="javascript:importFile()" style="font-size:16px;">Save</button>--> 
      <button type="button" onclick="javascript:u=document.getElementById('browse4File').value ;alert(u);" style="font-size:16px;">Save</button> 
     </span> 
    </div> 

以及警报（）不显示文件名，但它不显示的路径。安全问题...没问题！但是我怎样才能打开这个文件？我是否将它发送到后端？我在cherrypy服务器上使用Python。

或者JavaScript能否提取文件的内容？

请帮助...

TIA

DKean

Answer 1

使用HTML四是不可能的，与HTML 5可以使用file API。检查浏览器support here

例：

function handleFileSelect(evt) { 
    var files = evt.target.files; // FileList object 

    // Loop through the FileList and render image files as thumbnails. 
    for (var i = 0, f; f = files[i]; i++) { 

     // Only process image files. 
     if (!f.type.match('image.*')) { 
     continue; 
     } 

     var reader = new FileReader(); 

     // Closure to capture the file information. 
     reader.onload = (function(theFile) { 
     return function(e) { 
      // Render thumbnail. 
      var span = document.createElement('span'); 
      span.innerHTML = ['<img class="thumb" src="', e.target.result, 
          '" title="', escape(theFile.name), '"/>'].join(''); 
      document.getElementById('list').insertBefore(span, null); 
     }; 
     })(f); 

     // Read in the image file as a data URL. 
     reader.readAsDataURL(f); 
    } 
    } 

    document.getElementById('files').addEventListener('change', handleFileSelect, false); 

演示：Fiddle