Using HTML file type in JavaScript

Question

Does anyone know how to manage the <input type="file" id="myFile" /> in javascript so I can send the file to a php code?

I have something like this:

<input type="file" id="myFile" />
<input type="button" value="FILE" onclick="useFile()" />

Then, in javascript I want to use the file the user uploaded because I want to use it in a PHP code.

How do I get the file and send it to php as a parameter?

function useFile() {
   var myFile = document.getElementById("myFile"); //Does this work?
   // then how do I send it to a php?
}

I hope someone could help me.

Thanks a lot.

@putvande Thank you. Is it posible of doing this without using jQuery? — mauguerra, May 16 '14 at 15:50
anything you can do with jQuery, you can do it with JavaScript, but it's gonna take more work. — Francisco Corrales Morales, May 16 '14 at 15:51
Could you not just do it in straight PHP? Put that in a form and set the `action` to the PHP script. If you want to validate beforehand, I can answer for that, but this method seems slightly odd to me. — ArtOfCode, May 16 '14 at 15:52
IMHO, it takes more work to do this with jQuery over plain 'ole JavaScript. In your question's code, `myFile` will have a `files` property that contains a `FileList` (a pseudo-array) of `File` objects. Simply `append` the individual files to a `FormData` object and `xhr.send()` that `FormData` object. — Ray Nicholus, May 16 '14 at 15:52
This question answers yours: http://stackoverflow.com/questions/7138989/html5-ajax-multiple-files-upload?rq=1 — jeroen, May 16 '14 at 16:07

score 1 · Accepted Answer · edited May 23 '17 at 10:32

Can you submit the form? If so, it's very simple. Here's the HTML:

<form method="post" action="myScript.php"> <!-- Make a form tag that sends the input (using post) to your PHP script -->
    <input type="file" id="myFile" />  <!-- As you had above -->
    <input type="submit"/>  <!-- create a submit button that, when clicked, will send the file to the server and redirect the page to myScript.php -->
</form>

If you're not sure what post is, check out this site: http://www.restapitutorial.com/ and read this document: http://www.mediafire.com/view/6hmhaygp099gfdh/RESTful_Best_Practices-v1_1.pdf .

However, if you can't submit the form, you can get the file by registering an onchange handler in JavaScript. Check out this answer for more info: how to get files from <input type='file' .../> (Indirect) with javascript .

Do you have JQuery on your project? It makes it easy to send files via POST to your server. Read more about it here: http://api.jquery.com/jquery.post/ .

If you don't have JQuery you can use XMLHTTPRequest to send a post. This page has some good information on how to do it: http://www.openjs.com/articles/ajax_xmlhttp_using_post.php and here are the docs for XMLHTTPRequest: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest

I hope that helps!

Using HTML file type in JavaScript

1 Answers1