Note that there are some explanatory texts on larger screens.

plurals
  1. POHtml file picker with jQuery
    primarykey
    data
    text
    <blockquote> <p><strong>Possible Duplicate:</strong><br> <a href="https://stackoverflow.com/questions/4950567/reading-client-side-text-file-using-javascript">Reading client side text file using Javascript</a> </p> </blockquote> <p>I want to open a txt file at client, parse it with javascript and post parsed data to a server page with ajax. I have scripts for parsing and posting. All i need now is to simply pick file from client computer.</p> <p>What I need is something like this:</p> <pre><code>&lt;div id="content"&gt; &lt;button id="selectFile" onclick="return selectFileClick();" /&gt; &lt;/div&gt; </code></pre> <p>When user clicks button, a file dialog box appears and returns selected file. With this file name, I will make other operations like parsing etc.</p> <pre><code>function selectFileClick() { var fileName = filedialog(); // parsing file... return false; } </code></pre> <p>Edit: I dont want to upload file and I have a custom design which doesnt look like;</p> <pre><code>&lt;input type="file" id="file"&gt; </code></pre> <p>I need something like this: <a href="http://archive.plugins.jquery.com/plugin-tags/file-dialog" rel="nofollow noreferrer">jquery file dialog plugin</a></p> <p>Edit (2): I solved issue by this way;</p> <pre><code>$(function () { $("#button1").click(function (event) { event.preventDefault(); $('#file').trigger('click'); }); document.getElementById('file').addEventListener('change', readFile, false); }); </code></pre> <p>at html;</p> <pre><code>&lt;input id="button1" type="submit" value="add" /&gt; &lt;input type="file" id="file" style="display: none"&gt; </code></pre> <p>I hope this helps someone else ;)</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload