Automatically Selecting File and Submitting, Javascript

Question

So I am trying to programmatically browse and I want to upload a file to an input tag with the type of file.

How would I go about this? I don\'t want the user to have to

Answer 1

This is not possible. For <input type=file>, the value attribute of the input element is READONLY with Javascript. Otherwise, that would be a large security hole.

Answer 2

You can't have your script browse the user's machine and automatically search for a file you think they want to submit - but you can have your form submit when they find the file they want to give you:

<input type="file" name="my_file" />

That will generate a "Browse" button next to the field which, when the user clicks it, will open an OS explorer window to select their file.

Example form:

<form name="form" id="my_form">
    <input type="file" id="my_file" name="my_file" />
</form>

From there, simply place an onchange event listener on the field to automatically submit your form. With JQuery it looks like this:

$(function(){
    $('#my_file').change(function(){
       $('#my_form').submit();
    }); 

    $('#my_form').submit(function(event){
        alert('form submitted');
    });
});

Working demo: http://jsfiddle.net/AlienWebguy/SZFfL/

Answer 3

this is NOT possible since it would be a real security flaw - see http://www.w3.org/TR/html4/interact/forms.html#file-select