我目前有一个使用ajax，jquery提交多文本字段的表单，并通过php在数据库中添加信息而不刷新页面。这一切都很好，但现在我需要为每个盒子添加图像。 如何使用ajax，jquery php提交这些图像。
这是我的表格
<form action="" method="post" enctype="multipart/form-data" id="submitForminfo">
<div id="set1">
<div style="padding: 20px;">
<p>Box A</p>
<label class="adduserlabelblockfull">Title :</label><div class="textinputtextareablock"><input type="text" id="title_a" name="title[]" value="<?= $boxAcontent[0]; ?>" class="addusertextinput"></div>
<label class="adduserlabelblockfull">Text :</label><div class="textinputtextareablock"><textarea name="brieftxt[]" id="brieftxt_a" class="textinputtextarea"><?= $boxAcontent[1]; ?></textarea></div>
<div class="clearfix"> </div>
<div class="clearfix"> </div>
<label class="adduserlabelblockfull">Page URL :</label><div class="textinputtextareablock"><input type="text" id="url_a" name="url[]" value="<?= $boxAcontent[2]; ?>" class="addusertextinput"></div>
<div class="clearfix"> </div>
<label class="adduserlabelblockfull">Image A :</label><div class="textinputtextareablock"><input type="file" name="file[]" class="addusertextinput"></div>
<div class="clearfix"></div>
</div>
<div class="clearfix"> </div>
<div style="background: #999; padding: 20px;">
<p>Box B</p>
<label class="adduserlabelblockfull">Title :</label><div class="textinputtextareablock"><input type="text" id="title_b" name="title[]" value="<?= $boxBcontent[0]; ?>" class="addusertextinput"></div>
<label class="adduserlabelblockfull">Text :</label><div class="textinputtextareablock"><textarea name="brieftxt[]" id="brieftxt_b" class="textinputtextarea"><?= $boxBcontent[1]; ?></textarea></div>
<div class="clearfix"> </div>
<div class="clearfix"> </div>
<label class="adduserlabelblockfull">Page URL :</label><div class="textinputtextareablock"><input type="text" id="url_b" name="url[]" value="<?= $boxBcontent[2]; ?>" class="addusertextinput"></div>
<div class="clearfix"> </div>
<label class="adduserlabelblockfull">Image B :</label><div class="textinputtextareablock"><input type="file" name="file[]" class="addusertextinput"></div>
<div class="clearfix"> </div>
</div>
<div class="clearfix"> </div>
<div style="padding: 20px;">
<p>Box C</p>
<label class="adduserlabelblockfull">Title :</label><div class="textinputtextareablock"><input type="text" id="title_c" name="title[]" value="<?= $boxCcontent[0]; ?>" class="addusertextinput"></div>
<label class="adduserlabelblockfull">Text :</label><div class="textinputtextareablock"><textarea value="" name="brieftxt[]" id="brieftxt_c" class="textinputtextarea"><?= $boxCcontent[1]; ?></textarea></div>
<div class="clearfix"> </div>
<div class="clearfix"> </div>
<label class="adduserlabelblockfull">Page URL :</label><div class="textinputtextareablock"><input type="text" id="url_c" name="url[]" value="<?= $boxCcontent[2]; ?>" class="addusertextinput"></div>
<div class="clearfix"> </div>
<label class="adduserlabelblockfull">Image C :</label><div class="textinputtextareablock"><input type="file" name="file[]" class="addusertextinput"></div>
<div class="clearfix"></div>
</div>
<div class="clearfix"> </div>
<div style="background: #999; padding: 20px;">
<p>Box D</p>
<label class="adduserlabelblockfull">Title :</label><div class="textinputtextareablock"><input type="text" id="title_d" name="title[]" value="<?= $boxDcontent[0]; ?>" class="addusertextinput"></div>
<label class="adduserlabelblockfull">Text :</label><div class="textinputtextareablock"><textarea name="brieftxt[]" id="brieftxt_d" class="textinputtextarea"><?= $boxDcontent[1]; ?></textarea></div>
<div class="clearfix"> </div>
<div class="clearfix"> </div>
<label class="adduserlabelblockfull">Page URL :</label><div class="textinputtextareablock"><input type="text" id="url_d" name="url[]" value="<?= $boxDcontent[2]; ?>" class="addusertextinput"></div>
<div class="clearfix"> </div>
<label class="adduserlabelblockfull">Image D :</label><div class="textinputtextareablock"><input type="file" name="file[]" class="addusertextinput"></div>
<div class="clearfix"> </div>
</div>
</div>
<input type="button" id="addpage" value="Save Page" class="addnewuserbtn">
</form>
我找到了这段代码
//////////////////////////////////////////////////////////
xhr: function() {
var myXhr = $.ajaxSettings.xhr();
if(myXhr.upload){
myXhr.upload.addEventListener('progress',progress, false);
}
return myXhr;
//////////////////////////////////////////////////////////
和这个
//////////////////////////////////////////////////////////
function progress(e){
if(e.lengthComputable){
//this makes a nice fancy progress bar
$('progress').attr({value:e.loaded,max:e.total});
}
}
//////////////////////////////////////////////////////////
任何人都可以帮我完成下面的功能，以便在提交检查以查看所有字段都不为空之前验证输入文本字段和文件字段，然后上传文件。我没有使用IE，因此兼容性不是问题。
$("#addpage").click(function(){
var form = new FormData($('#submitpage')[0]);
$.ajax(
url: 'includes/process-category.php',
data: form,
contentType: false,
processData: false,
type: 'POST',
},
success: function(msg) {
// Message Sent? Show the 'Thank You' message and hide the form
if(msg == 'OK') {
result = '<div class="notification_ok">The Category has been saved. Please wait while you are redirected!</div>';
$('#note').html(result);
setTimeout(function()
{
window.location.href = "includes/showcategories.php";
}, 4000);
}
else
{
result = msg;
$('#note').html(result);
}
}
});
return false;
});