wie man einen Datei-Upload mit Jquery-Serialisierung durchführt
Ich habe also ein Formular und sende das Formular über Ajax mit der Jquery-Serialisierungsfunktion
serialized = $(Forms).serialize();
$.ajax({
type : "POST",
cache : false,
url : "blah",
data : serialized,
success: function(data) {
}
aber was dann, wenn das Formular ein <input type="file">-Feld hat .... wie gebe ich die Datei mit dieser Ajax-Serialisierungsmethode in das Formular ein?
Eine Datei kann nicht mit AJAX hochgeladen werden, da Sie nicht auf den Inhalt einer auf dem Client-Computer gespeicherten Datei zugreifen und sie in der Anforderung mit Javascript senden können. Eine der Techniken, um dies zu erreichen, ist die Verwendung von verborgenen Iframes. Es gibt ein Nice Jquery-Formular-Plugin , mit dem Sie Ihre Formulare AJAXifizieren können und das - Datei-Upload unterstützt . Wenn Sie also dieses Plugin verwenden, sieht Ihr Code einfach so aus:
$(function() {
$('#ifoftheform').ajaxForm(function(result) {
alert('the form was successfully processed');
});
});
Das Plugin kümmert sich automatisch um das Abonnieren des submit-Ereignisses des Formulars, das Abbrechen der Standardübermittlung, das Serialisieren der Werte, die Verwendung der richtigen Methode und die Verarbeitung von Datei-Upload-Feldern, ...
Sie können jetzt Dateien mit Ajax hochladen!
Beispiele:
https://stackoverflow.com/a/8758614/1072492
http://net.tutsplus.com/tutorials/javascript-ajax/uploading-files-with-ajax/
Es funktioniert für jede Art von Formular
$(document).on("submit", "form", function(event)
{
event.preventDefault();
var url=$(this).attr("action");
$.ajax({
url: url,
type: $(this).attr("method"),
dataType: "JSON",
data: new FormData(this),
processData: false,
contentType: false,
success: function (data, status)
{
},
error: function (xhr, desc, err)
{
}
});
});
var form = $('#job-request-form')[0];
var formData = new FormData(form);
event.preventDefault();
$.ajax({
url: "/send_resume/", // the endpoint
type: "POST", // http method
processData: false,
contentType: false,
data: formData,
Es hat für mich funktioniert! Setzen Sie einfach processData und contentType auf False.
Sie können Dateien über AJAX hochladen, indem Sie die FormData-Methode verwenden. Obwohl IE7,8 und 9 die FormData-Funktionalität nicht unterstützen.
$.ajax({
url: "ajax.php",
type: "POST",
data: new FormData('form'),
contentType: false,
cache: false,
processData:false,
success: function(data) {
$("#response").html(data);
}
});
HTML
<form name="my_form" id="my_form" accept-charset="multipart/form-data" onsubmit="return false">
<input id="name" name="name" placeholder="Enter Name" type="text" value="">
<textarea id="detail" name="detail" placeholder="Enter Detail"></textarea>
<select name="gender" id="gender">
<option value="male" selected="selected">Male</option>
<option value="female">Female</option>
</select>
<input type="file" id="my_images" name="my_images" multiple="" accept="image/x-png,image/gif,image/jpeg"/>
</form>
JavaScript
var data = new FormData();
//Form data
var form_data = $('#my_form').serializeArray();
$.each(form_data, function (key, input) {
data.append(input.name, input.value);
});
//File data
var file_data = $('input[name="my_images"]')[0].files;
for (var i = 0; i < file_data.length; i++) {
data.append("my_images[]", file_data[i]);
}
//Custom data
data.append('key', 'value');
$.ajax({
url: "URL",
method: "post",
processData: false,
contentType: false,
data: data,
success: function (data) {
//success
},
error: function (e) {
//error
}
});
PHP
<?php
echo '<pre>';
print_r($_POST);
print_r($_FILES);
echo '</pre>';
die();
?>
hmmmm Ich denke, es gibt eine sehr effiziente Methode, um es speziell für Leute zu machen, die alle Browser anvisieren möchten und nicht nur FormData Browser
die Idee,IFRAMEauf der Seite zu verbergen und das Senden in das From inside IFrame-Beispiel normal zu machen
<FORM action='save_upload.php' method=post
enctype='multipart/form-data' target=hidden_upload>
<DIV><input
type=file name='upload_scn' class=file_upload></DIV>
<INPUT
type=submit name=submit value=Upload /> <IFRAME id=hidden_upload
name=hidden_upload src='' onLoad='uploadDone("hidden_upload")'
style='width:0;height:0;border:0px solid #fff'></IFRAME>
</FORM>
am wichtigsten ist es, ein form-Ziel zum versteckten iframeIDoder name und enctype multipart/form-data zu machen, um Fotos zu akzeptieren
Javascript-Seite
function getFrameByName(name) {
for (var i = 0; i < frames.length; i++)
if (frames[i].name == name)
return frames[i];
return null;
}
function uploadDone(name) {
var frame = getFrameByName(name);
if (frame) {
ret = frame.document.getElementsByTagName("body")[0].innerHTML;
if (ret.length) {
var json = JSON.parse(ret);
// do what ever you want
}
}
}
server Side Beispiel PHP
<?php
$target_filepath = "/tmp/" . basename($_FILES['upload_scn']['name']);
if (move_uploaded_file($_FILES['upload_scn']['tmp_name'], $target_filepath)) {
$result = ....
}
echo json_encode($result);
?>
HTML5 führt die FormData-Klasse ein, die zum Hochladen von Dateien mit ajax verwendet werden kann.
Die Unterstützung für FormData beginnt mit folgenden Desktop-Browserversionen. IE 10+, Firefox 4.0+, Chrome 7+, Safari 5+, Opera 12+
https://developer.mozilla.org/de/docs/Web/API/FormData/FormData
$(document).on('click', '#submitBtn', function(e){
e.preventDefault();
e.stopImmediatePropagation();
var form = $("#myForm").closest("form");
var formData = new FormData(form[0]);
$.ajax({
type: "POST",
data: formData,
dataType: "json",
url: form.attr('action'),
processData: false,
contentType: false,
success: function(data) {
alert('Sucess! Form data posted with file type of input also!');
}
)};});
Durch Verwendung von new FormData() und Einstellung von processData: false, contentType:false in ajax war das Senden des Formulars mit Dateieingabe für mich erfolgreich
Mit obigem Code kann ich Formulardaten mit Dateifeld auch über Ajax übermitteln