jQuery Upload-Datei mit jQuery's Ajax-Methode (ohne Plugins)

Question

Im Moment möchte ich Bild-Upload ohne Verwendung von Plug-Ins implementieren.

Meine Upload-Formular sieht wie folgt aus

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

Und meine jQuery-Code ist:

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

Wenn ich Firebug öffnen, kann ich das Ajax() Methode macht einfache Form Post (nicht Multi sehen (Teil) und POST Inhalt ist leer

Ist es möglich, Dateien hochladen mit jQuery ajax() -Methode oder sollte ich das auf andere Weise tun?

danken Ihnen sehr viel

Answer 1

jQuery Ajax nicht das Hochladen von Dateien und dies unterstützt die Umsetzung könnte manuell umständlich. Ich würde vorschlagen, dass Sie das jQuery form Plugin betrachten.

Natürlich können Sie immer den Quellcode des Plugins auschecken, um zu sehen, wie es implementiert wird, wenn Sie es nicht einschließen möchten (es verwendet einen versteckten iFrame, da Dateien nicht mit AJAX hochgeladen werden können), aber warum tun wenn man es direkt :-)

verwenden könnte hier ein Beispiel, wie Sie Ihren Code könnte wie folgt aussehen:

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

auch den Upload-Button eine Absenden-Button machen:

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

Answer 2

AJAX oder angemessener XMLHttpRequest unterstützt Dateiuploads noch nicht. Es gibt Workarounds wie das Hochladen über eine , aber es ist ziemlich umständlich. Ihre Zeit wird besser in die Erstellung Ihrer Anwendungen investiert, als diese Lösungen neu zu erfinden.

Aber wenn Sie neugierig sind, wie es intern funktioniert, dann zögern Sie nicht, den Quellcode einiger der Plugins, die diese Funktionalität anbieten, zu überprüfen. Eine sehr einfache Erklärung kann unter diesem Link zu finden - http://www.openjs.com/articles/ajax/ajax_file_upload/

Grundsätzlich Sie das Formular target innerhalb eines einreichen ändern, damit die Aktualisierung der Seite zu vermeiden und Simulation von AJAX, die es nicht wirklich, aber wen interessiert das schon - Der Endbenutzer kann es nicht sagen.

Ein minimales Beispiel für einen Iframe basierend Upload kann wie folgt aussehen:

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

Beachten Sie, dass dies keine Antwort Handhabung macht, sendet aber nur das Bild an den Server. Um die Antwort zu verarbeiten, muss ein Rückruf für das Ereignis load des Iframes geschrieben werden.

Answer 3

Während Sie einen multipart/form-data Anforderungskörper erstellen können, um ein Datei-Upload-Feld einzuschließen, wird es Ihnen nicht helfen, da Sie clientseitige Dateien nicht aus dem Datei-Upload-Feld lesen können.

(Außer mit der FileList Schnittstelle, aber derzeit nur Firefox unterstützt das.)

Answer 4

Eigentlich gibt es eine Methode zum Hochladen von Dateien mit Ajax (Xmlhttp) mit Firefox> 3 und Chrome, es ist auch möglich, mehrere Dateien ohne die Verwendung von Formularen und iFrames hochzuladen. Eigentlich mache ich ein jQuery-Plugin dafür und bald werde ich es veröffentlichen. Hier ist ein einfaches Beispiel:

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

Für Dateien in Server-Seite bekommen, wie PHP, hat dies für upload.php tun:

$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); 

Dies ist ein einfache Idee Beispiel nicht das komplette Arbeitsskript . Hoffe das hilft. Für weitere Informationen siehe 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]; 
     } 


    }