JqueryForm and empty downloads

Question

I scratched my head too long: using jquery.form, ( http://malsup.com/jquery/form ) with PHP ... my $_FILES['someimage'] set, but the error number is always UPLOAD_ERR_NO_FILE , the size is also 0 .

JavaScript:

 $('form input[type=file]').change(function () { $(this).clone().appendTo('#imgform'); $('#imgform').ajaxForm(); $('#imgform').ajaxSubmit({ type: 'POST' }); }); 

What is added to:

 <form id="imgform" method="POST" action="/api/images.php" enctype="multipart/form-data"></form> 

From another form that has input files with files in the swamp.

PHP logs are clean, but var_dump ing $ _FILES always shows that the index is set to the name of the form element ... but there is no data.

Thanks guys! (Sorry, I know jQuery-like questions are too frequent around these parts).

EDIT I found the Clone file entry element in Javascript , which contains additional information and suggested alternatives.

What I decided to do was to have one form for browsers without JavaScript, and JavaScript / jQuery splits one form into three forms:

Head form -> File upload form -> tail form

Then I can post the file asynchronously, and when I click the submit tail, paste the form together in POST, as these are just text fields.

Answer 1

Two things that I see when I try to run this. Since you clone and then add, I wonder if your file entry exists in the context of the form. If not, then $('form input[type=file]') will never find the cloned element.

Perhaps the biggest problem is that browsers handle file upload controls. You cannot programmatically set the value in the file control - otherwise it would be trivial, as a web developer, to automatically set the file upload value to "c: \ Files \ MyPasswordFile.txt" and automatically submit the form invisibly to the user.

When I changed the code to this:

 <input type="file" name="imageFile" /> <form id="imgform" method="POST" action="/api/images.php" enctype="multipart/form-data"> </form> <script> $('input[type=file]').change(function() { alert("ACTION"); $(this).clone().appendTo('#imgform'); //$('#imgform').ajaxForm(); //$('#imgform').ajaxSubmit( // { // type: 'POST' // } // ); }); </script> 

I see the behavior as indicated above - the field is cloned and added, but it does not matter. Since part of the cloning process involves setting a field value, this will violate this security restriction and thus fail.

Answer 2

You cannot send files using ajax, because javascript cannot access the local hard drive for security reasons.

There are ways to simulate ajax wiring using iFrames. This link is a good example.

http://www.ajaxf1.com/tutorial/ajax-file-upload-tutorial.html