我在此页面中有两个表单，我希望第二个表单将在文件类型的图像更改时自动提交。我正在使用
onchange="alert('hell'); document.getElementById('img_upload').submit();"
消息提醒成功，但表单未提交。我认为没有遗漏任何东西。
<html>
<head>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.Jcrop.min.js"></script>
<link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css" />
</head>
<body>
<form id='slider_img' name='slider_img' action='class_file_for_crop_image.php' enctype="multipart/form-data">
<img src="pool.jpg" id="target" />
<br><input type='text' value='rah_default' name='img_name' />
<br><br><input type='submit' value='Subm' />
<br><input type='button' onclick='' />
</form>
<form id='img_upload' name='img_uploadd' method="POST" action='upload_img.php' enctype="multipart/form-data">
<input type='file' name='fileToUpload' onchange="alert('hell'); document.getElementById('img_upload').submit();" />
<input type='submit' name='submit' />
</form>
.
</body>
<script language="Javascript">
var global_cords_var = {
"x1" : 0,
"y1" : 0,
"x2" : 0,
"y2" : 0,
"w" : 0,
"h" : 0,
};
jQuery(function($) {
$('#target').Jcrop({
onSelect: showCoords,
bgColor: 'black',
bgOpacity: .6,
setSelect: [ 100, 100, 300, 300 ],
aspectRatio: 1/1
});
});
function showCoords(c)
{
// variables can be accessed here as
// alert( "x->"+c.x+", y->"+ c.y+ ", x2-> "+c.x2+", y2-> "+ c.y2+", w-> "+ c.w +", h-> "+ c.h);
global_cords_var['x1'] = c.x;
global_cords_var['y1'] = c.y;
global_cords_var['x2'] = c.x2;
global_cords_var['y2'] = c.y2;
global_cords_var['w'] = c.w;
global_cords_var['h'] = c.h;
// prin_r();
}
/*
function prin_r(){
alert( "rahul x->"+global_cords_var['x1']+", y->"+ global_cords_var['y1']+ ", x2-> "+global_cords_var['x2']+", y2-> "+ global_cords_var['y2']+", w-> "+ global_cords_var['w'] +", h-> "+ global_cords_var['h']);
}
*/
/////////////////////ajax upload////////////////////
$(document).ready(function (e){
$("#slider_img").on('submit',(function(e){
e.preventDefault();
$.ajax({
url: "class_file_for_crop_image.php?x1="+global_cords_var['x1']+"&y1="+global_cords_var['y1']+"&x2="+global_cords_var['x2']+"&y2="+global_cords_var['y2']+"&h="+global_cords_var['h']+"&w="+global_cords_var['w'],
type: "POST",
data: new FormData(this),
contentType: false,
cache: false,
processData:false,
success: function(data){
//$("#targetLayer").html(data);
alert(data);
/*
var j_obj = JSON.parse(data);
document.getElementById("data_html").innerHTML = '';
alert(j_obj.query);
document.getElementById("data_html").innerHTML = j_obj.html_data;
document.getElementById("rahul").innerHTML = j_obj.query;
*/
// document.writeln(j_obj.query);
},
error: function(){alert('error');}
});
}));
});
//////////////////////ajax upload////////////////////////
/////////////////////ajax upload image first////////////////////
$(document).ready(function (e){
$("#img_upload").on('submit',(function(e){
e.preventDefault();
$.ajax({
url: "upload_img.php",
type: "POST",
data: new FormData(this),
contentType: false,
cache: false,
processData:false,
success: function(data){
alert('rahu succ');
//$("#targetLayer").html(data);
//alert(data);
/*
var j_obj = JSON.parse(data);
document.getElementById("data_html").innerHTML = '';
alert(j_obj.query);
document.getElementById("data_html").innerHTML = j_obj.html_data;
document.getElementById("rahul").innerHTML = j_obj.query;
*/
// document.writeln(j_obj.query);
},
error: function(){alert('error');}
});
}));
});
//////////////////////ajax upload////////////////////////
</script>
</html>
最佳答案
这是工作代码(plunker sample):
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
</head>
<body>
<form id='slider_img' name='slider_img' enctype="multipart/form-data">
<br><input type='text' value='rah_default' name='img_name' />
<br><br><input type='submit' value='Subm' />
<br><input type='button' onclick='' />
</form>
<form id='img_upload' name='img_uploadd' enctype="multipart/form-data">
<input type='file' name='fileToUpload' onchange="submitForm()" />
<input type='submit' name='submitBtn' />
</form>
</body>
<script language="Javascript">
var submitForm = function() {
alert('hell');
$("#img_upload").submit();
}
/////////////////////ajax upload////////////////////
$(document).ready(function (){
$("#slider_img").on('submit',(function(e){
alert(data);
e.preventDefault();
}));
$("#img_upload").on('submit',(function(e){
alert('rahu succ');
e.preventDefault();
}));
});
//////////////////////ajax upload////////////////////////
</script>
</html>
为了简单起见，我将 ajax 调用更改为警报。
以下是我使此代码正常工作的步骤:
- 带有
id='img_upload'的表单，第二个子输入的名称为'submit'，应该避免使用，因此我将其更改为submitBtn. (有关更多详细信息，请参阅此 so answer) - 我将
onchange处理程序代码移至单独的函数submitForm并通过 jquery 触发表单提交:$("#img_upload").submit();，所以现在处理程序被正确调用。
希望这有帮助
关于javascript - 有两个表单不是使用 javascript 提交的，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30011457/