[英]AJAX Fileupload with jquery
I am currently trying to solve a problem. 我目前正在尝试解决问题。 I have several forms on a single page which get sent to the backend asynchronously via ajax.
我在一个页面上有几种表单,这些表单通过ajax异步发送到后端。
Now some of them need to have a fileupload which doesnt break the process, so it alsoneeds to be handled asynchronously. 现在,其中一些文件需要具有不会中断该过程的文件上传,因此还需要异步处理。
I am trying to figure it out like that : 我正在试图找出这样的:
// Allgemein Submit
$allgSubmit.click(function(){
event.preventDefault();
var gehrKundennummer = $('#gehrKundennummer').val();
var kundenklasse = $("input[type='radio'][name='kundenklasse']:checked").val();
var lkw12t = $('#lkw12t').val();
var lkw3t = $('#lkw3t').val();
var autobus = $('#autobus').val();
var firmenname1 = $('#firmenname1').val();
var firmenname2 = $('#firmenname2').val();
var uidnummer = $('#uidnummer').val();
var peselregon = $('#peselregon').val();
var firmenart = $('#firmenart option:selected').val();
var strasse = $('#strasse').val();
var ort = $('#ort').val();
var plz = $('#plz').val();
var land = $('#land').val();
var fd = new FormData();
var file = fd.append('file', $('#allg_firmen_dok').get(0).files[0]);
var allgArray = {
'gehrKundennummer':gehrKundennummer,
'kundenklasse':kundenklasse,
'lkw12t':lkw12t,
'lkw3t':lkw3t,
'autobus':autobus,
'firmenname1':firmenname1,
'firmenname2':firmenname2,
'uidnummer':uidnummer,
'peselregon':peselregon,
'firmenart':firmenart,
'strasse':strasse,
'ort':ort,
'plz':plz,
'land':land,
'file':file
};
//var data = new FormData();
//jQuery.each(jQuery('#allg_firmen_dok')[0].files, function(i, file) {
// data.append('file-'+i, file);
//});
console.log(allgArray);
$.ajax({
url: "PATHTOFILE/logic/logic_update_client_allg.php",
type: "POST",
data: allgArray,
processData: false, // tell jQuery not to process the data
contentType: false,
success: function(allgArray){
alert(allgArray);
var allgSave = $('#allgSave');
allgSave.text('Aktualisieren erfolgreich!');
allgSave.toggle();
},
error: function(){
var allgSave = $('#allgSave');
allgSave.text('Aktualisieren fehlgeschlagen!');
allgSave.toggle();
}
});
});
The console log of the array returns all values correctly except the one for "file" it says undefined. 阵列的控制台日志正确返回所有值,但未定义的“文件”值除外。
I don't know how to deal with it, are there any requirements that im missing? 我不知道该如何处理,有没有其他要求?
Thanks for any kind of help 谢谢你的帮助
EDIT 编辑
var file = fd.append('file', $('#allg_firmen_dok').get(0).files[0]);
returns undefined 返回未定义
I think the variable fd = new FormData() is an Object and it has attribute "file". 我认为变量fd = new FormData()是一个对象,并且具有属性“文件”。 So it cannot pass the attribute "file" to another Object "allgArray" You need to check about it before you call function
因此它不能将属性“文件”传递给另一个对象“ allgArray”。在调用函数之前,需要检查一下它
$.ajax({
url: "PATHTOFILE/logic/logic_update_client_allg.php",
type: "POST",
data: allgArray,
Think about the data you send! 考虑一下您发送的数据! It maybe another instance to get data from "file" of "fd".
从“ fd”的“文件”获取数据可能是另一个实例。 Hope it help you!
希望对您有帮助! ^^ Btw, I used AJAX to send file last time
^^顺便说一句,我上次使用AJAX发送文件
$(document).ready(function (e) {
$("#Form").on('submit',(function(e) {
e.preventDefault();
$.ajax({
url: "uploader.php", // Url to which the request is send
type: "POST", // Type of request to be send, called as method
data: new FormData(this), // Data sent to server, a set of key/value pairs (i.e. form fields and values)
contentType: false, // The content type used when sending data to the server.
cache: false, // To unable request pages to be cached
processData:false, // To send DOMDocument or non processed data file it is set to false
success: function(data) // A function to be called if request succeeds
{
console.log(data);
}
});
}));
}); });
在ajax选项中添加headers: { "Content-Type": "multipart/form-data" }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.