Serializar tipo de archivo jQuery

Question

Estoy intentando serializar mis datos de formulario, incluido el campo de imagen de archivo usando jquery.form.js jQuery API. La API me está ayudando a serailze campos de datos que incluye la imagen y vuelva objeto de imagen como [object file]

Aquí está mi código para la serialización

var data = $js("form[name=ajx_imgupload]").formSerialize(); 
    var img = $js("#upload_image").fieldSerialize(); 

    $js.ajax({ 
       url: "index.php?option=com_obituary&task=upload", 
       type: "POST", 
       dataType:"json", 
       data: data, 
       beforeSend: function(){ 
        $js(".loadingblock").show(); 
       }, 
       complete: function(){ 
        $js(".loadingblock").hide(); 
       }, 
       success: function(res){ 
        alert(); 
       }, 
       error: function(jqXHR, textStatus, errorThrown){ 
        alert(textStatus);     
       } 
      }); 

pegado con tema ... ayuda será muy apreciada.

Gracias

Answer 1

deja que te ayude. Hice esto hace 1 día. Tengo formulario que incluye el campo de imagen. cuando lo envía su imagen de carga a través de jquery.form.js

Nota: Estoy cargando el archivo con jqueryimageupload.php, si lo desea puedo pegarlo. Es una simple carga de archivo php. parte http://www.w3schools.com/php/php_file_upload.asp

html:

<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();  
} 

en forma última de someter:

$('#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 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 (tenga en cuenta que cualquiera de los métodos siguientes auto son los métodos de instancia, utilizo 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'); 

       } 

      } 

     }); 

No se puede cargar imágenes usando sólo jQuery nativa métodos. Check out http://jquery.malsup.com/form/

Tiene métodos que harían esto para usted perfectamente.

Eso parece funcionar para mí. En la parte de atrás puedo tomar los parámetros POST con $ _POST y los archivos con $ _FILES (o algo así)

Parece que ajaxSubmit publica instantáneamente el formulario con datos serializados hechos automáticamente.

Espero que ayude.

Answer 3

No puede usar ajax para cargar archivos. Sin embargo, para simular el efecto, puede tener un formulario en un iframe oculto y enviarlo/.submit() al URL de carga.

Más o menos como this one.

Answer 4

Se puede usar esta forma (de 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 
    }); 
    }); 

Es más flexible y fácil