Javascript onChange submit() form doesn't Post upload files to PHP

I have an upload form that is working fine with a submit button, but I really would like it to submit on its own without a submit button onChange when a user selects an image. I have it sending the form with onChange but it is not sending the uploaded file like when you hit the button! It is sending it as “example.jpg” instead of actually sending the file for upload.

Does anyone know what could possibly be wrong? Is there something special you need to add?

Thanks a lot!

Do you use <input type=“file”>? Can you post here the minimalistic sample that demonstrates the issue or provide the URL?

If I’m not mistaken there are security measures taken to prevent direct access to the value attribute of a file upload field via javascript. There may be workarounds written out there to accomplish what you’re trying to do, but I believe that basic file upload forms won’t function this way. I think you can ‘access’ the value attribute in the file field, but cannot change it.

@jreider: you are right and the value of the input[@type=‘file’] cannot be changed by the page. But it triggers onchange when user changes its value by typing in it or by browsing for file so the form can be submittedby attaching submit code to this event. I believe that mail.google.com handles attachments in that way.

What do you think a work around would be? I’ve honestly been at this all of yesterday with no luck lol.

I’m using <input type=“file” name=“image” onChange=“submit()”>

The JS is simply:

document.newad.submit();

I’ve tried dynamically creating the form with javascript and adding all of the stuff like enctype=“multipart/form-data”;
encoding=“multipart/form-data”;
method=“post”;
action=“url here”;
etc…

For how frustrating this has been, I’m surprised that there is not anything on the subject on Google. I cannot find anyone having trouble with submitting a form with java and keeping file uploads intact. Do you have any idea where to go from here?

Thanks!

If you want to perform file uploads via ajax, it requires submitting the form from an iframe so that only the iframe reloads, and not the rest of the page.

The upload page is located within an iframe already on the post page. So you’re saying that if I have it submit to an iframe from the top level page it will work?

Is this really ajax what I’m trying to do? I know I tried to make it look ajax by having it in an iframe but all I’m really trying to do is submit it using javascript…

This works fine for me with opera9, ff3, ie7

Maybe your serverside code is faulty, or this is some browser/software specific security feature.

Thanks for the reply!

Did you do a file upload or just retrieve the regular POST variables? I’m getting everything but the files when submitted with javascript.

The form is working fine when submitted with the regular HTML submit button, so wouldn’t that mean that my PHP is good? I’m really not sure what is wrong…

It definately uploaded.
Using php, I checked via


print_r($_FILES);

tmp_name and size exist.

Your code probably has a logic error. For example, thinking a certain variable needs to exist(like the submit button’s name).

In the form action I have:

upload.php?id=$id&upload=on

Could this affect it if the form is being submitted by javascript?

I don’t have anything with the submit button that could be making this happen. I double checked to make sure.

<input name=\“Submit\” type=\“submit\” value=\“Add\”>

I know what you mean about the submit button being checked but there is no check for Submit anywhere.

Could it be the action possibly? I’m out of ideas.

Start with something minimal which works


<?php
// test.php
print_r($_FILES);
?>
<form enctype="multipart/form-data" action="test.php" method="post">
<input name="a" type="file" onChange="document.forms[0].submit()">
<input type="submit">
</form>

Add your changes back in slowly until it stops working.