получить данные загруженного файла в javascript

Question

Я хочу загрузить файл 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; 
} 

Так как я могу получить данные внутри этого файла?

Answer 1

вы можете использовать новый HTML 5 файлов API для чтения содержимого файла

https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications

, но это не будет работать в любом браузере, так что вы, вероятно, нужен запасной вариант на стороне сервера.

Answer 2

Приведенный ниже пример основан на решении 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="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>