Archivo de carga jQuery utilizando el método ajax de jQuery (sin complementos)

Question

Por el momento quiero implementar la carga de imágenes sin usar ningún complemento.

Mi formulario de carga se ve así

<form action="/Member/UploadPicture" enctype="multipart/form-data" id="uploadform" method="post"> 
      <span> 
       <div class="upload" id="imgUpl"> 
        <h3>Upload profile picture</h3> 
        <div class="clear5"></div> 
        <input type="file" name="file" id="file" /> 
        <button class="btn-bl" id="upComplete"><span>Upload</span></button> 
       </div> 

      </span> 
      </form> 

Y mi código jQuery es:

$('#upComplete').click(function() { 
      $('#up').hide(); 
      $('#upRes').show(); 

      var form = $("#uploadform"); 

      $.ajax({ 
       type: "POST", 
       url: "/Member/UploadPicture", 
       data: form.serialize(), 
       success: function (data) { 
        alert(data); 
       } 
      }); 

      $.fancybox.close(); 
      return false; 
     }); 

Si abro Firebug, puedo ver que el método Ajax() hace sencillo formulario posterior (no múltiples -parte) y el contenido POST está vacío

¿Es posible cargar archivos usando el método jQuery ajax() o debería hacerlo de otra manera?

muchas gracias

Answer 1

jQuery Ajax no soporta la carga de archivos y la aplicación de este manual puede ser engorroso. Sugiero que mires el plugin jQuery form.

Por supuesto, siempre puedes consultar el código fuente del complemento para ver cómo se implementa si no quieres incluirlo (utiliza un iFrame oculto ya que los archivos no se pueden cargar con AJAX), pero ¿por qué hacerlo? si se puede usar directamente :-)

He aquí un ejemplo de cómo el código podría ser:

$(function() { 
    $('#uploadform').ajaxForm(); 
}); 

también hacen el botón de carga de un botón de enviar:

<button class="btn-bl" id="upComplete" type="submit"> 
    <span>Upload</span> 
</button> 

Answer 2

AJAX o más apropiadamente XMLHttpRequest aún no admite cargas de archivos. Hay soluciones tales como la carga a través de un , pero es bastante engorroso. Su tiempo será mejor empleado en la construcción de sus aplicaciones en lugar de reinventar estas soluciones.

Pero si eres curioso sobre cómo funciona internamente, entonces no dudes en consultar el código fuente de algunos de los complementos que ofrecen esta funcionalidad. Una explicación muy sencilla se puede encontrar en este enlace - http://www.openjs.com/articles/ajax/ajax_file_upload/

Básicamente, se cambia la forma target a presentar dentro de un , evitando así la actualización de la página, y la simulación de AJAX, que no es verdad, pero a quién le importa - el usuario final no puede decir.

Un ejemplo mínimo para un iframe carga basada puede tener este aspecto:

​$("#upComplete").click(function() { 
    // create a dynamic iframe, or use existing one 
    var iframe = $("<iframe id='f' name='f' src=''>"); 
    // attach a load event to handle response/ know about completion 
    iframe.load(function() { alert('complete'); }); 
    iframe.appendTo('body'); 
    // change form's target to the iframe (this is what simulates ajax) 
    $('#uploadForm').attr('target', 'f'); 
    $('#uploadForm').submit(); 
});​​​​​​ 

Tenga en cuenta que esto no hace ninguna gestión de respuesta, pero sólo envía la imagen al servidor. Para manejar la respuesta, se debe escribir una devolución de llamada para el evento load del iframe.

Answer 3

Si bien usted mismo puede crear un cuerpo de solicitud multipart/form-data para incluir un campo de carga de archivos, no lo ayudará porque no puede leer los archivos del lado del cliente desde el campo de carga de archivos.

(excepto en la interfaz FileList, pero actualmente solo Firefox lo admite.)

Answer 4

En realidad, hay un método para cargar archivos con ajax (xmlhttp) con Firefox> 3 y Chrome, también es posible cargar varios archivos sin utilizar formularios e iframes. De hecho, estoy haciendo un plugin jQuery para hacer esto y pronto lo publicaré. Aquí está un ejemplo sencillo:

var file=$('<input type=file />').get(0).files[0]; 
function asyncupload(file) 
{ 
    var xhr = new XMLHttpRequest();  
    xhr.onreadystatechange = function() 
    { 
     if (xhr.readyState == 4) 
     { 
      if ((xhr.status >= 200 && xhr.status <= 200) || xhr.status == 304) 
      { 
       //alert(xhr.responseText); 
      } 
     } 
    }; 
    xhr.upload.onload=function(e) 
    { 
     $('div#axprogress').progressbar("option", "value", 100);; 
    }; 
    xhr.upload.onprogress=function(e) 
    { 
     if (e.lengthComputable) 
     { 
      var perc = Math.round((e.loaded * 100)/e.total); 
      $('div#axprogress').progressbar("option", "value", perc); 
     } 
    }; 

    xhr.open("POST", "upload.php?filename="+file.name,true); 
    xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest"); 
    xhr.setRequestHeader("X-File-Name", encodeURIComponent(file.name)); 
    xhr.send(file); 
    return xhr; 
} 

Para la obtención de los archivos en el servidor, como PHP, tenemos que hacer esto para upload.php:

$input = fopen("php://input", "r"); 
$temp = tmpfile(); 
$realSize = stream_copy_to_stream($input, $temp); 
fclose($input); 

if ($realSize != $this->getSize()) 
    {    
    return false; 
} 

$target = fopen($_GET['filename'], "w");   
fseek($temp, 0, SEEK_SET); 
stream_copy_to_stream($temp, $target); 
fclose($target); 

Este es un ejemplo simple idea no el guión de trabajo completa . Espero que esto ayude. Para obtener más información consulte la https://developer.mozilla.org/En/XMLHttpRequest/Using_XMLHttpRequest

Answer 5

<input type="file" id="picfile" name="picf" /> 
     <input type="text" id="txtName" style="width: 144px;" /> 
    <input type="button" value=" ADD " id="btncatsave" style="width: 75px" /> 
$("#btncatsave").click(function() { 
var Name = $("#txtName").val(); 
var formData = new FormData(); 
var totalFiles = document.getElementById("picfile").files.length; 

        var file = document.getElementById("picfile").files[0]; 
        formData.append("FileUpload", file); 
        formData.append("Name", Name); 

$.ajax({ 
        type: "POST", 
        url: '/Category_Subcategory/Save_Category', 
        data: formData, 
        dataType: 'json', 
        contentType: false, 
        processData: false, 
        success: function (msg) { 

           alert(msg); 

        }, 
        error: function (error) { 
         alert("errror"); 
        } 
       }); 

}); 

[HttpPost] 
    public ActionResult Save_Category() 
    { 
     string Name=Request.Form[1]; 
     if (Request.Files.Count > 0) 
     { 
      HttpPostedFileBase file = Request.Files[0]; 
     } 


    }