Serialize upload

JavaScript
1

Hi, can i ask some help why is that i could not get post value when using the jquery ajax and with the use of serialize data when uploading image file.
i only get the value of input tpe=“text” but the input type=“file” i could not post the value.can someone help me on this please why it will not be posted.

Thank you in advance.

2

I didn’t think that file uploads could be done via AJAX - can they?

3

Ahh - it seems that it’s now possible - here’s some details about how it can be done.
http://stackoverflow.com/questions/166221/how-can-i-upload-files-asynchronously-with-jquery/8758614#8758614

And here’s a jQuery plugin that helps you to easily do an ajax file upload

4

Hi paul_wilkins, Thank you for this…so it must have plugins in order to get work with this file upload…

Thank you i will try this one.

5

Hi jemz,

So I got and read your PM.
I understand you don’t want to make your code public and I will try and help you.

The first thing you need to do is to make a small demo page that I can look at that demonstrates your issue.

Then reply to this thread detailing what is not working. Say what you expect/would like to happen and what is actually happening.
You can then PM me the address of the demo page that you have made.

Once again, apart from that, please reply only in this thread.

6

Hi pullo, My problem is that i have a form with input type=“text” and it has input type=“file” the problem is that i could not get the file when i am going to submit the form,because i am using the jquery.ajax to send. my form goes something like this.


<form id="myform" action="tootherpage.php" enctype="multipart/form-data">
   <input type="text" name="fname">
   <input type="text" name="mname">
   <input type="text" name="lname">

  <input type="file" name="dataupload">

</form>

I tried to use .submit but nothing happens. is there other ways not to use pluguins?

Thank you. :slight_smile:

7

Hi paul_wilkins,I am confuse what should i put in the “fileElemntId” is it the id of my form “myform”?


<form id="myform"  enctype="multipart/form-data">
   <input type="text" name="fname">
   <input type="text" name="mname">
   <input type="text" name="lname">
 
  <input type="file" name="dataupload">

</form>



 $.ajaxFileUpload
        (
            {
                url:'doajaxfileupload.php',
                secureuri:false,
                fileElementId:'fileToUpload',
                dataType: 'json',
                success: function (data, status)
                {
                    if(typeof(data.error) != 'undefined')
                    {
                        if(data.error != '')
                        {
                            alert(data.error);
                        }else
                        {
                            alert(data.msg);
                        }
                    }
                },
                error: function (data, status, e)
                {
                    alert(e);
                }
            }
        )
       
        return false;

    }

Thank you.

8

Give the filename field a unique identifier and use that identifier also in the fileElementId section.

9

Hi, you mean like this


<form id="myform"  enctype="multipart/form-data">
   <input type="text" name="fname">
   <input type="text" name="mname">
   <input type="text" name="lname">
 
  <input type="file" name="dataupload" id="myupload">
  <input type="submit" id="submit_btn" name="submit" value="submit">
</form>

and this is the script to send data


$('#submit_btn').click(function(){
   var ser_form = $('#myform').serialize();
    $.ajax({
       type: 'post',
       data: ser_form,
       url: 'process_toother.php'
       success: function(data){
      }

 });

});



   $.ajaxFileUpload
        (
            {
                url:'process_toother.php',
                secureuri:false,
                fileElementId:'myupload',
                dataType: 'json',
                success: function (data, status)
                {
                    if(typeof(data.error) != 'undefined')
                    {
                        if(data.error != '')
                        {
                            alert(data.error);
                        }else
                        {
                            alert(data.msg);
                        }
                    }
                },
                error: function (data, status, e)
                {
                    alert(e);
                }
            }
        )
       
        return false;

    }

is this correct ?please correct me if i am wrong.

Thank you:)

10

Hi @Pullo @paulwilkins, I fixed it now thank you for your help :slight_smile: