[英]upload image in form submit with ajax
我已使用 Ajax 提交表单,但无法在此提交中上传图片
<form id="forms-items" name="forms-items" method="post" enctype="multipart/form-data">
<input id="uploadBtn" name="uploadimg" type="file" class="upload" />
</form
在提交代码
if($_FILES['uploadimg']['size']>0)
{
$ftype=$_FILES["uploadimg"]["type"];
if(move_uploaded_file($_FILES['uploadimg']['tmp_name'], $target_path))
{
$default=1;
$mesg="File Uploaded Successfully";
}
else
$mesg="File Uploading Failed!!";
else
$mesg="Please Select A File";
输出: Please Select A File
JavaScript 代码
$("#forms-items").submit(function()
{
$.ajax({
url: "ajax/submitform.php",
type: "POST",
data: $("#forms-items").serialize(),
success: function(response) {
alert(response);
}
});
});
使用FormData()
类最简单:
所以现在您有一个 FormData 对象,可以与 XMLHttpRequest 一起发送。 并使用 FormData 对象附加字段
<script type="text/javascript">
$(document).ready(function () {
var form = $('#forms-items'); //valid form selector
form.on('submit', function (c) {
c.preventDefault();
var data = new FormData();
$.each($(':input', form ), function(i, fileds){
data.append($(fileds).attr('name'), $(fileds).val());
});
$.each($('input[type=file]',form )[0].files, function (i, file) {
data.append(file.name, file);
});
$.ajax({
url: 'ajax/submitform.php',
data: data,
cache: false,
contentType: false,
processData: false,
type: 'POST',
success: function (c) {
//code here if you want to show any success message
alert(response);
}
});
return false;
});
})
</script>
并强制 jQuery 不为您添加 Content-Type 标头,否则上传文件边界字符串将丢失。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.