jqueryForm and empty uploads

Been scratching my head for too long on t开发者_运维问答his: Using jquery.form, (http://malsup.com/jquery/form) with PHP ... my $_FILES['someimage'] gets set but the error number is always UPLOAD_ERR_NO_FILE, size is also 0.

The JavaScript:

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

Which appends to:

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

From another form which has bog-standard file inputs.

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

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

EDIT I found Clone a file input element in Javascript which contains further information and suggested alternatives.

What I decided to do is have a single form for non JavaScript browsers, and JavaScript/jQuery breaks the single form into three forms:

Head form -> File upload form -> tail form

Then I can post the file upload async, and when the tail's submit is clicked, glue the form together into a POST as they are just text fields.

Two things I see when I try to run this. Since you are cloning then appending, I wonder if your file input exists within the context of the form. If not, then $('form input[type=file]') will never find the element to be cloned.

Perhaps the biggest problem, though, is in the way browsers handle file upload controls. You cannot programmatically set a value on a file input 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 your 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 can see the behavior as above - the field is cloned and appended - but it has no value. Since part of the clone process involves setting the field value - this would violate that security restriction and thus fails.

You can't post files using ajax as javascript cannot access any local hard drive for security reasons.

There are ways to mimic ajax posting using iFrames. This link is a good example.

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