jQuery ajax, wyślij formularz z plikiem typu wejściowego i Json

Mam formularz z kilkoma wejściami i innym polem.jQuery ajax, wyślij formularz z plikiem typu wejściowego i Json

mam przycisk zapisz, a gdy klikam, mam wysłać formularz z ajax z jQuery:

$.ajax({ 
     type:  "POST", 
     dataType: "json", 
     url:  $('#ajaxUrl').val(), 
     data:  "action=save&" + form.serialize() 
});

Więc kiedy mam tylko proste wejście jak tekst, wybierz etc .. to jest OK. Ale jeśli mam plik typu wejściowego, nie mogę odzyskać pliku. $ _FILES jest zawsze puste.

Jak mogę to zrobić tak prosto, jak to możliwe?

Edycja: nie chcę użyć wtyczki :)

Źródło

2013-07-18 Clément Andraud

Używanie [formData] (https://developer.mozilla.org/en-US/docs/Web/API/FormData)! – adeneo

możliwy duplikat [Jak mogę przesyłać pliki asynchronicznie z jQuery?] (Http://stackoverflow.com/questions/166221/how-can-i-upload-files-asynchronously-with-jquery) – Martijn

@ Clément Andraud, nie na pewno, czy to ci pomoże, czy nie, ale przyjrzyj się http: //wordpress.stackexchange.com/questions/71170/how-do-i-upload-import-form-input-files-via-ajax-function Może masz jakiś pomysł. –

Użyłem tej jQuery plugin który ma zdolności do upload files.

HTML:

<form action="file-echo2.php" method="post" enctype="multipart/form-data"> 
    <input type="file" name="myfile"><br> 
    <input type="submit" value="Upload File to Server"> 
</form>

Javascrtipt:

$('form').ajaxForm({ 
    beforeSend: function() { 

    }, 
    uploadProgress: function(event, position, total, percentComplete) { 

    }, 
    success: function() { 

    }, 
    complete: function(xhr) { 

    } 
});

Źródło

2013-07-18 08:40:07 LeftyX

Zrobiłbym ten sam komentarz, co w odpowiedzi na streetpc +1 –

form.serialize nie uda wejść plików. Będziesz musiał XMLHttpRequest z formData, jak sugeruje Adeneo, zobacz example usage here. W starszych przeglądarkach istnieją rozwiązania wykorzystujące element iframe i POSTing formularza z elementem iframe jako celem. Niektóre wtyczki jquery zrobią to za Ciebie, np. JQuery-File-Upload (ale jest też dużo innych).

Źródło

2013-07-18 08:41:19

Wsparcie dla startu formData w IE10, dlatego też zasugeruję użycie wtyczki, która używa elementu iframe do obsługi starszej przeglądarki. +1 –

Hum, mój problem, pracuję nad niestandardowym CMS. Funkcja zapisywania nowej zawartości jest już zapisana. Więc jeśli mogę po prostu edytować ten skrypt i nie przepisuję wszystkiego ... ^^ –

Jeśli możesz pominąć obsługę starszych przeglądarek, możesz po prostu edytować swój skrypt, aby użyć formularza. Jeśli nie możesz (zrzucając IE 8 i 9 jest dość drastyczny), obawiam się, że będziesz musiał pójść trochę dalej. Jednak niektóre wtyczki wykonają cały proces podnoszenia ciężarów, więc nie powinno to być zbyt skomplikowane. –

Znalazłem to little "vanilla" framework przez zapytanie "Korzystanie z obiektów FormData" w google.

wykorzystywane przez:

AJAXSubmit(myForm);

tylko modyfikować na

function ajaxSuccess(){/*here*/}

jeśli console.log() odpowiedź na ajaxSuccess można zobaczyć dane przekazane do serwera. Jest to własność submittedData.

Źródło

2014-06-03 07:04:48 marlo

Wprowadzenie do ASP.NET MVC:

aby zacząć swoją postać-Wrapper:

<form id="inputform"> 
    <input class="hide" type="file" name="file" id="file" /> 
</form>

Сreate klient-handler wysłać:

$("#yourButton").bind('click', function() { 
    var data = new window.FormData($('#inputform')[0]); 
    $.ajax({ 
     xhr: function() { 
      return $.ajaxSettings.xhr(); 
     }, 
     type: "POST", 
     data: data, 
     cache: false, 
     contentType: false, 
     processData: false, 
     url: "@Url.Action("MethodName", "ControllerName")", 
     success: function() { }, 
     error: function() { }, 
    }); 
});

Do obsługi na serwerze strona (kontroler):

public ActionResult MethodName(HttpPostedFileWrapper file) { 
    var img = Image.FromStream(file.InputStream); 
     .... 
     return ..; 
    }

Mam nadzieję, że to pomoże Ci zaoszczędzić czas;)

Źródło

2014-09-01 12:56:42 Sevenbi

jQuery ajax, wyślij formularz z plikiem typu wejściowego i Json

Odpowiedz

Powiązane problemy