Edit an input file in HTML page with Javascript (without using POST/GET)

Question

I need to upload the content of a file to a page and parse it and can only use HTML and Javascript to do it. The only ways I know how to do it is through form submission but this is no use for me. Is there any way on Javascript to retrieve the document content from the input div?

<input id="fileupload" name="file" type="file" />

http://stackoverflow.com/questions/2320069/jquery-ajax-file-upload/10811427#10811427 — enapupe, Mar 27 '14 at 01:30

sshashank124 · Answer 1 · 2014-03-27T01:25:49.787

0

To get the value of the input, you can use:

document.getElementById('fileupload').value

To change the value you can do:

document.getElementById('fileupload').value = some_value

edited Mar 27 '14 at 01:25

answered Mar 27 '14 at 01:20

sshashank124

31,495
9
67
76

I may have not been as clear as I should have, I needed to get the content from the file not the content from the tag (input). This actually shows something like c:\fakepath\filename – user3466681 Mar 27 '14 at 11:04

score 0 · Accepted Answer · answered Mar 27 '14 at 01:42

You can do this with HTML5 FileApi(or very old IE).
HTML5:

<input id="fileupload" name="file" type="file" />
<div></div>
<script>
document.querySelector('#fileupload').addEventListener('change', function(){
    var fr = new FileReader();
    fr.onload = function(){
        document.querySelector('div').innerHTML = this.result;
    }
    fr.readAsText(this.files[0]);
});
</script>

http://jsfiddle.net/Wm8Vs/

Edit an input file in HTML page with Javascript (without using POST/GET)

2 Answers2