如何通过AJAX
获得使用PHP上传的图片,我需要通过Ajax如何通过AJAX
我的表单域获得使用PHP上传的图片,
<form action="#" method="post" id="rent_details" name="rent_details" enctype="multipart/form-data">
Upload Image :<input type="file" name="fileToUpload" id="fileToUpload">
type:- <select name="spottype" id="spottype">
<option value="xxx">xxx</option>
<option value="yyy">yyy</option>
<option value="zzz">zzz</option>
</select>
<input type="button" id="bidm" name="bidm" value="Next"/>
</form>
In ajax call I have following code :-
$.ajax({
url: './api/addspot.php',
data: $('#rent_details').serialize(),
type: 'POST',
contentType: false,
success: function(data) {
alert(data);
},
error: function(xhr, status, error) {
alert(xhr.responseText);
}
});
在这里,我在阿贾克斯成功函数只拿到了spottype值但我需要获得 所有表单字段的值。
<form action="#" method="post" id="rent_details" name="rent_details" enctype="multipart/form-data">
Upload Image :<input type="file" name="fileToUpload" id="fileToUpload">
type:- <select name="spottype" id="spottype">
<option value="xxx">xxx</option>
<option value="yyy">yyy</option>
<option value="zzz">zzz</option>
</select>
<input type="submit" id="bidm" name="bidm" value="Next"/>
</form>
$(document).ready(function(){
$("#rent_details").submit(function(e){
e.preventDefault();
$.ajax({
method:'POST',
url: "./api/addspot.php",
data: new FormData(this),
processData: false,
contentType: false
}).done(function(data) {
console.log(data);
});
});
});
而且您请求的页面上的名字得到。使用$ _FILES上传文件。
formData = new FormData($('form')[0]); – 2015-03-03 08:46:25
它将与(this)一起使用。因为如果在提交表单上工作。 – Jitendra 2015-03-03 09:08:25
尝试使用此方法获取文件字段的值:
$('input[type=file]').val()
此代码工作
我得到了错误, ReferenceError:输入未定义 – 2015-03-03 08:17:47
尝试放置单引号。更新我的回答 – 2015-03-03 08:22:35
对不起,这也是行不通的... – 2015-03-03 08:24:56
这将工作。
$('#rent_details').on('submit',(function(e) {
e.preventDefault();
var formData = new FormData(this);
$.ajax({
url: './api/addspot.php',
data: formData,
type: 'POST',
contentType: false,
processData: false,
success: function(data) {
alert(data);
},
error: function(xhr, status, error) {
alert(xhr.responseText);
}
});
}));
formData = new FormData($('form')[0]); – 2015-03-03 08:45:45
您需要使用FormData();
知道这段代码在IE9及更低版本上无效。
这是用于多文件上传。
$(document).on('click', '#bidm', function(e) {
e.preventDefault();
var request = new FormData(this);
var my_files = $(this).closest('form').find('#fileToUpload').files;
$.each(my_files, function(j,file) {
` request.append('fileToUpload['+j+']', file);
});
$.ajax({
url: './api/addspot.php',
data: request,
dataType: "json",
contentType: false,
processData: false,
enctype: 'multipart/form-data',
success: function(data) {
alert(data);
},
error: function(xhr, status, error) {
alert(xhr.responseText);
}
});
});
需要使用FormData()作为ajax数据。它把所有的表单变量传递给了ajax。然后在ajax函数中,您可以检索文件名和临时文件名,并将图像文件保存到需要保存的文件夹中。
'serialize'不适用于文件字段。尝试从'$('#fileToUpload')。val()' – 2015-03-03 08:09:34
$('#fileToUpload')。val()获得文件,它给出空的结果。 – 2015-03-03 08:12:40
看看这个http://*.com/questions/425095/submit-form-using-ajax-and-jquery – cb0 2015-03-03 08:25:18