Serialize file type jQuery

Question

I\'m trying to serialize my form data including file image field using jquery.form.js jQuery API. The API is helping me to serailze data fields including image

Answer 1

You can't use ajax for file upload. To simulate the effect though, you can have a form in a hidden iframe and submit/ .submit() it to the upload url.

More or less like this one.

Answer 2

HTML

<!--Add Inventory Form-->

<div id="addInventoryFormHTML" class style="display:none">

    <!--Form-->
    <form id="addInventoryForm" novalidate="novalidate" enctype="multipart/form-data">

        <input id="itemTitleField" class="textField addInventoryField" name="itemTitleField" type="text" placeholder="Item Title"/>

        <textarea id="itemDescriptionField" class="textAreaField addInventoryField" name="itemDescriptionField" type="textarea" placeholder="Item Description"></textarea>

        <input id="itemPictureField" class="uploadField addInventoryField" name="itemPictureField" type="file"/>

    </form>

    <!--Errors-->
    <div id="inventoryAddErrors"></div>

</div>

Javascript (note that any methods following self are instance methods, I use Joose)

$(form).ajaxSubmit({//note that form is just the form built with a jQuery selector

            url: self.returnBaseULR() + '/ajaxadd',

            type: 'POST',

            error: function(xhr, status, error) {
                console.log('Unable to contact the server');
            },

            success: function(response){

                var jsObjectFromResponse = JSON.parse(response);

                if(jsObjectFromResponse.success){

                    self.cLog('Item uploaded successfully!');
                    document.location.reload();

                } else {

                    self.cLog('Listing failed, see AJAX response');

                }

            }

        });

You can't upload images using just jQuery native methods. Check out http://jquery.malsup.com/form/

It has methods that'd do this for you perfectly.

That just appears to work for me. On the back end I can grab POST params with $_POST and files with $_FILES (or something like that)

Looks like ajaxSubmit instantly posts the form with serialized data done automatically.

Hope that helps.

Answer 3

let me help you. I made this just 1 day ago. I have form including image field. when you submit it its uploading image via jquery.form.js

Note: I am uploading file with jqueryimageupload.php, if you want I can paste it. It is a simple php file upload. http://www.w3schools.com/php/php_file_upload.asp

html part:

<form name="imageform" id="imageform" action="jqueryimageupload.php" method="post">
  <input type="file" name="resim" id="img" onchange="ImageUpload()" />
  <input type="hidden" name="action" value="imageup" />
</form>

jquery:

function ImageUpload() {
    $("#return").show();
    $("#return").html('');
    $("#return").html('<img src="images/load2.gif" alt="Uploading...."/> wait, uploading...');
    $("#imageform").ajaxForm({
        target: '#return',
        success: function() {
            $("#return").fadeOut(10000);
        }
   }).submit();     
}

at last form submit:

$('#form').submit(function() {
    var img=$('#image').val();
    var forms=($(this).serialize());
    $.ajax({
        type:"POST",            
        url: "do.php?do=upload",
        data:forms+'&r='+encodeURIComponent(img),
        success: function(result){ //your code }     
    });
 });

Answer 4

You can use this way (from http://portfolio.planetjon.ca/2014/01/26/submit-file-input-via-ajax-jquery-easy-way/)

$( '#my-form' )
  .submit( function( e ) {
    $.ajax( {
      url: 'http://host.com/action/',
      type: 'POST',
      data: new FormData( this ),
      processData: false,
      contentType: false
    } );
  } );

it's more flexible and easy way