How to load text from a file to text area using JavaScript using input type file?

Question

<script type="text/javascript">
function CopyMe(oFileInput) {
var filePath = oFileInput.value;
    fh = fopen(filePath, 0);
    if (fh!=-1) {
        length = flength(fh);
        str = fread(fh, length);
        fclose(fh);
    }
document.getElementByID('myText').innerHTML = filePath;
}
</script>
<input type="file" onchange="CopyMe(this);"/>
<textarea id="myText"></textarea>

I do get any output/change in the text area! What should I do? Please help!

I used the following PHP code for that, I don't know whether it is correct:

<?php
function Read($file){
echo file_get_contents($file);
};
?>

Following was the JavaScript:

    function CopyMe(oFileInput) {
    var filePath = oFileInput.value;
    document.getElementByID('text-area3').innerHTML = "<?php Read(filePath);?>";
    }

Any suggestions?

Do you want the content of the actual file in your text-area or just the filename of the file from the input file control? — Hanlet Escaño, Dec 05 '12 at 22:17
Are you confusing php with javascript? Javascript, as a clientside language does not support diskoperations such as fileopen. — Henrik Andersson, Dec 05 '12 at 22:18
this was already answered before http://stackoverflow.com/a/8137303/1781209 — jxs, Dec 05 '12 at 22:24
@João Oliveira I dont wish to use AciveX, that is why I asked !!! — Animesh Pandey, Dec 05 '12 at 22:26
@limelights I did try PHP for this, I will edit the original post and tell what I did ! — Animesh Pandey, Dec 05 '12 at 22:29
Your CopyMe function is run client-side, so the php code is just a string and will not be executed. you need to submit the form/file to your server to be able to print the contents using php — NickSlash, Dec 05 '12 at 22:55
Take a look at this [post][1] , it is the same topic. [1]: http://stackoverflow.com/questions/750032/reading-file-contents-on-the-client-side-in-javascript-in-various-browsers — Mehdi Karamosly, Dec 06 '12 at 16:49

jxs · Answer 1 · 2012-12-05T22:51:19.167

4

@apanimesh061 you have to use the FileReader api

document.getElementById('files').addEventListener('change', CopyMe, false);
function CopyMe(evt) {
    var file = evt.target.files[0];
    if (file) {
        var reader = new FileReader();
        reader.readAsDataURL(file)
    }
};

http://jsfiddle.net/wAJe4/1/

it's documented at Mozilla Developer Nework for example

edited Dec 05 '12 at 22:51

answered Dec 05 '12 at 22:30

jxs

457
4
9

Ah! this is nice! But when I load the file it does not show its contents in the text area .... – Animesh Pandey Dec 05 '12 at 23:58
It did not work for me, could you please recheck your jsfiddle link ? – Mehdi Karamosly Dec 06 '12 at 16:45
I guess you have to replace HTML code with ` ` – Animesh Pandey Dec 08 '12 at 09:36
@JoãoOliveira That is also not working ... ! We get the path of the file but the contents are not displayed in the rext box ... what should be done ??? – Animesh Pandey Dec 08 '12 at 09:38

score 1 · Answer 2 · answered Dec 05 '12 at 22:33

1

If you are running this in a browser you can't read files on the client machine using JavaScript.

answered Dec 05 '12 at 22:33

Tad

934
6
10

Kindly,have a look at the PHP code that I tried, dunno whether it is the correct way ???? – Animesh Pandey Dec 05 '12 at 22:42

How to load text from a file to text area using JavaScript using input type file?

2 Answers2