jQuery przesłać plik przy użyciu metody ajax jQuery (bez wtyczek)

Question

W tej chwili chcę zaimplementować przesyłanie zdjęć bez użycia jakichkolwiek wtyczek.

Moja forma przesyłania wygląda to

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

A mój kod jQuery jest:

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

Jeśli otworzyć Firebug, widzę, że metoda ajax() robi prosta forma post (nie wielo -part) i treść POST jest pusta

Czy można przesyłać pliki przy użyciu metody ajax() jQuery, czy też powinienem to zrobić w jakikolwiek inny sposób?

Dziękuję bardzo

Answer 1

jQuery ajax nie obsługuje przesyłanie plików i wdrażania tego ręcznie może być kłopotliwe. Sugerowałbym, aby spojrzeć na wtyczkę jQuery form.

Oczywiście zawsze możesz sprawdzić kod źródłowy wtyczki, aby zobaczyć, jak jest zaimplementowany, jeśli nie chcesz go dołączyć (korzysta z ukrytej ramki iFrame, ponieważ plików nie można przesłać z AJAX), ale dlaczego to robi jeśli można go używać bezpośrednio :-)

Oto przykład, w jaki sposób kod może wyglądać następująco:

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

dokonać również przycisk Prześlij przycisk Prześlij:

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

Answer 2

AJAX lub dokładniej XMLHttpRequest nie obsługuje jeszcze przesyłania plików. Istnieją sposoby obejścia problemu, takie jak przesyłanie za pośrednictwem , ale jest to raczej uciążliwe. Twój czas będzie lepiej spędzony na budowaniu aplikacji, a nie na przerabianiu tych rozwiązań.

Ale jeśli jesteś ciekawostką, jak to działa wewnętrznie, to możesz wypożyczyć kod źródłowy niektórych wtyczek, które oferują tę funkcjonalność. Bardzo proste wyjaśnienie można znaleźć pod tym linkiem - http://www.openjs.com/articles/ajax/ajax_file_upload/

Zasadniczo, można zmienić formę target złożyć wewnątrz , unikając w ten sposób odświeżania strony i symulowanie AJAX, która tak naprawdę nie jest, ale kogo to obchodzi - użytkownik końcowy nie może powiedzieć.

Minimalny przykładem iframe przesyłania oparty mogą wyglądać następująco:

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

Zauważ, że to nie robi żadnej obsługi odpowiedzi, ale po prostu wysyła obraz do serwera. Aby obsłużyć odpowiedź, należy wywołać wywołanie zwrotne dla zdarzenia iframe o numerze load.

Answer 3

Chociaż można samodzielnie utworzyć ciało żądania multipart/form-data, aby dołączyć pole do przesyłania plików, to nie pomoże, ponieważ nie można odczytać plików po stronie klienta z pola przesyłania plików.

(Z wyjątkiem korzystania z interfejsu FileList, ale obecnie tylko Firefox je obsługuje.)

Answer 4

W rzeczywistości istnieje metoda przesyłania plików z ajaxem (xmlhttp) w przeglądarce Firefox> 3 i Chrome, możliwe jest także przesyłanie wielu plików bez użycia formularzy i ramek iframe. Właściwie robię wtyczkę jQuery, aby to zrobić i wkrótce ją opublikuję. Oto prosty przykład:

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

Uzyskania plików po stronie serwera, takich jak PHP, które to zrobić dla 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); 

Jest to prosty przykład pomysł nie kompletny skrypt roboczego . Mam nadzieję że to pomoże. Więcej informacji można znaleźć w 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]; 
     } 


    }