Как получить содержимое файла, выбранного с помощью кнопки обзора?

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> 

И предупреждения() не показывает имя файла, но он не показывает путь. Проблема с безопасностью ... не проблема! Но как я могу открыть этот файл? Отправляю ли я его на задний план? Я использую Python на своем сервере с вишневым.

Или может ли JavaScript извлечь содержимое файла?

Пожалуйста, помогите ...

ТИА

DKean

Answer 1

С HTML 4 не представляется возможным, с HTML 5 вы можете использовать file API. проверить браузер support here

Ex:

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