HTML file collector using jQuery

Question

Possible duplicate:
Reading a text file on the client side using Javascript

I want to open the txt file on the client, parse it using javascript and publish the processed data on the server page using ajax. I have scripts to parse and publish. Now I just need to select the file from the client computer.

I need something like this:

<div id="content"> <button id="selectFile" onclick="return selectFileClick();" /> </div> 

When the user clicks the button, a dialog box appears with the file and returns the selected file. With this file name, I will perform other operations, such as parsing, etc.

 function selectFileClick() { var fileName = filedialog(); // parsing file... return false; } 

Edit: I do not want to upload the file, and I have my own design that does not look,

 <input type="file" id="file"> 

I need something like this: jquery file dialog plugin

Edit (2): I solved the problem this way;

 $(function () { $("#button1").click(function (event) { event.preventDefault(); $('#file').trigger('click'); }); document.getElementById('file').addEventListener('change', readFile, false); }); 

in html;

 <input id="button1" type="submit" value="add" /> <input type="file" id="file" style="display: none"> 

I hope this helps someone else;)

Answer 1

Look at this: HTML file API

This is probably the easiest way to do this, for example.

 <input type="file" id="file"> 

Then simply attach the function to the "onChange" function of the element.

EDIT: just noticed that you are using jQuery, so you can really just do:

 $("#file").change(function() { selectFileClick(); });