jQuery caricare il file utilizzando il metodo ajax di jQuery (senza plug-in)

Question

Al momento, voglio implementare il caricamento delle immagini senza utilizzare alcun plug-in.

mio modulo di upload simile a questa

<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> 

E il mio codice jQuery è:

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

Se apro Firebug, vedo che il metodo ajax() fa semplice post forma (non più -part) e il contenuto POST è vuoto

È possibile caricare file utilizzando il metodo jQuery ajax() o dovrei farlo in altro modo?

ringrazio molto

Answer 1

jQuery Ajax non supporta il caricamento dei file e l'attuazione di questo manuale potrebbe essere ingombrante. Ti suggerisco di guardare il plugin jQuery form.

Ovviamente si può sempre verificare il codice sorgente del plug-in per vedere come viene implementato se non si desidera includerlo (utilizza un iFrame nascosto poiché i file non possono essere caricati con AJAX) ma perché farlo se è possibile utilizzare direttamente :-)

Ecco un esempio di come il codice potrebbe essere simile:

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

anche rendere il pulsante Carica pulsante di invio:

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

Answer 2

AJAX o più appropriatamente XMLHttpRequest non supporta ancora i caricamenti di file. Esistono soluzioni alternative come il caricamento tramite uno , ma è piuttosto ingombrante. Il tuo tempo sarà meglio speso nel costruire le tue applicazioni piuttosto che reinventare queste soluzioni.

Ma se siete curiosi di sapere come funziona internamente, quindi sentitevi liberi di controllare il codice sorgente di alcuni dei plugin che offrono questa funzionalità. Una spiegazione molto semplice può essere trovato a questo link - http://www.openjs.com/articles/ajax/ajax_file_upload/

In sostanza, si cambia il modulo target di presentare all'interno di un , evitando così il refresh della pagina, e la simulazione di AJAX, che in realtà non è, ma che importa - l'utente finale non può dirlo.

Un esempio minimo per un iframe caricare basata può apparire come segue:

​$("#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(); 
});​​​​​​ 

Si noti che questo non fa alcuna manipolazione risposta, ma solo invia l'immagine al server. Per gestire la risposta, è necessario scrivere una richiamata per l'evento load dell'iframe.

Answer 3

Mentre è possibile creare autonomamente un corpo di richiesta multipart/form-data per includere un campo di caricamento file, non sarà di aiuto perché non è possibile leggere i file sul lato client dal campo di caricamento file.

(Tranne l'utilizzo dell'interfaccia FileList, ma attualmente solo Firefox lo supporta.)

Answer 4

In realtà esiste un metodo per caricare file con ajax (xmlhttp) con Firefox> 3 e Chrome, è anche possibile caricare più file senza utilizzare moduli e iframe. In realtà sto facendo un plugin jQuery per farlo e presto lo pubblicherò. Ecco un semplice esempio:

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

Per ottenere i file in lato server, come PHP, hanno a che fare questo per 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); 

Questo è un semplice esempio, non idea lo script di lavoro completo . Spero che questo ti aiuti. Per maggiori informazioni fare riferimento al 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]; 
     } 


    }