get the data of uploaded file in javascript

Question

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     lt form id  importPfForm  gt   lt input type  file  name  datafile  size  20  gt   lt input type  button  value  IMPORT  onclick  importPortfolioFunction     gt   lt  form gt   function importPortfolioFunction  arg         var f   document getElementById   importPfForm         var fileName  f datafile value         So how can i get the data inside that file

User · Accepted Answer

you can use the new HTML 5 file api to read file contents

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.

User · Answer

The example below shows the basic usage of the FileReader to read the contents of an uploaded file  Here is a working Plunker of this example    lt  DOCTYPE html gt   lt html gt     lt head gt       lt script src  script js  gt  lt  script gt     lt  head gt      lt body onload  init    gt       lt input id  fileInput  type  file  name  file    gt       lt pre id  fileContent  gt  lt  pre gt     lt  body gt   lt  html gt    script 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

User · Answer

FileReaderJS can read the files for you  You get the file content inside onLoad e  event handler as e target result

User · Answer

The example below is based on the html5rocks solution  It uses the browser s FileReader   function  Newer browsers only   See http   www html5rocks com en tutorials file dndfiles  toc-reading-files  In this example  the user selects an HTML file  It uploaded into the  lt textarea gt     lt form enctype  multipart form-data  gt   lt input id  upload  type file   accept  text html  name  files    size 30 gt   lt  form gt    lt textarea class  form-control  rows 35 cols 120 id  ms word filtered html  gt  lt  textarea gt    lt script gt  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    lt  script gt

[javascript] get the data of uploaded file in javascript

Examples related to javascript

Examples related to html

Examples related to ajax

Examples related to file-upload