我下面有这个脚本,它由两部分组成,一组输入文本字段和一个图像上传,然后运行一个函数来减小图像文件的大小,两者都可以作为单独的ajax调用工作。我希望能够将两者合并为一个ajax调用,但我不确定如何继续,有人会有建议吗?感谢
$("#submit").click(function() {
var we_publication_name = $("select#we_publication_name").val();
var we_section_name = $("select#we_section_name").val();
var we_caption1 = $("#we_caption1").val();
var we_StoryName = $("#we_StoryName").val();
var we_heading = $("#we_heading").val();
var we_sub_heading = $("#we_sub_heading").val();
var we_author_name = $("#we_author_name").val();
var we_body = $("#we_body").val();
if (window.File && window.FileReader && window.FileList && window.Blob) {
var files = document.getElementById('insert_image').files;
for(var i = 0; i < files.length; i++) {
resizeAndUpload(files[i]);
}
} else {
alert('The File APIs are not fully supported in this browser.');
}
function resizeAndUpload(file) {
var reader = new FileReader();
reader.onloadend = function() {
var tempImg = new Image();
tempImg.src = reader.result;
tempImg.onload = function() {
var MAX_WIDTH = 800;
var MAX_HEIGHT = 600;
var tempW = tempImg.width;
var tempH = tempImg.height;
if (tempW > tempH) {
if (tempW > MAX_WIDTH) {
tempH *= MAX_WIDTH / tempW;
tempW = MAX_WIDTH;
}
} else {
if (tempH > MAX_HEIGHT) {
tempW *= MAX_HEIGHT / tempH;
tempH = MAX_HEIGHT;
}
}
var canvas = document.createElement('canvas');
canvas.width = tempW;
canvas.height = tempH;
var ctx = canvas.getContext("2d");
ctx.drawImage(this, 0, 0, tempW, tempH);
var dataURL = canvas.toDataURL("image/jpeg");
var xhr = new XMLHttpRequest();
document.getElementById('the_image').src=dataURL;
}
}
reader.readAsDataURL(file);
}
$.ajax({
type: "POST",
url: "add_news.php",
data: {image:dataURL,we_publication_name:we_publication_name,we_section_name:we_section_name,we_caption1:we_caption1,we_StoryName:we_StoryName,we_heading:we_heading,we_sub_heading:we_sub_heading,we_author_name:we_author_name,we_body:we_body},
});
});