62,046
社区成员
发帖
与我相关
我的任务
分享求助：为何img.onload的return false无法终止提交表单？应该怎么修改呢，求大神指导
急着做一个单位自己用的小项目，为何img.onload的return false无法终止提交表单？改了一天了，网上查了一整天还没解决，麻烦大神帮忙看一下第48行和53行的问题，要怎么修改呢？谢谢，感激不尽。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>#</title>
<script type="text/javascript" src="/js/libs/jquery18.js"></script>
<script language="javascript">
<!--
function Checkgo(obj) {
//图片验证
photo_flag = true;
var ff = $("#strPhoto").val();
if(ff == null || ff == ""){
alert("*提示：请选择要上传的照片文件。");
return false;
}else if(!/.(jpg|jpeg)$/.test(ff)){
alert("*提示：照片文件格式必须为jpg格式。");
return false;
}
//设置限制图像的大小为1MB，这里你可以自己设置
var fSize = 1024 * 1024 *1;
//限制图片宽高
var fHeight = 160;
var fWidth = 120;
var fileType;
var fileSize;
var filePath;
var img = new Image();
//显示图片
if (obj.files) {
var reader = new FileReader();
var thisFile = obj.files[0];
fileType = thisFile.type;
fileSize=thisFile.size;
reader.readAsDataURL(thisFile);
//文件读取成功完成时触发
reader.onloadend = function(event){
img.src = event.target.result;
var photo_flag=true;
img.onload = function(event) {
//校验图片尺寸
if(img.width != fWidth || img.height != fHeight){
photo_flag=false;
$("#imgShow").attr("src", "temp.jpg");
alert("*提示：照片尺寸不对。您只能上传"+fWidth+"*"+fHeight+"像素（宽*高）的照片。111");
alert(photo_flag+"111");
//////为何下面return false无法终止提交form提交？
return false;
}
filePath = this.src;
}
//////为何测试时先执行下面的alert？
alert(photo_flag+"222");
}
}else{// 如果是ie浏览器
obj.select();
var path = document.selection.createRange().text;
img.src = path;
if(img.width != fWidth || img.height != fHeight){
photo_flag=false;
$("#imgShow").attr("src", "temp.jpg");
alert("*提示：照片尺寸不对。您只能上传"+fWidth+"*"+fHeight+"像素（宽*高）的照片。");
return false;
}
alert(photo_flag+"333");
var fileType = path.substring(path.length-4,path.length);
if(img.readyState == "complete") {
fileSize = img.fileSize;
}else{
img.onreadystatechange = function(){
// 当图片load完毕
if(img.readyState=='complete'){
fileSize = img.fileSize;
if(fileSize > fSize){
photo_flag = false;
$("#imgShow").attr("src", "temp.jpg");
alert("*提示：照片文件大小应小于1M。");
return false;
}
}
}
}
if (path) {
filePath = path;
}
}
if(
fileType != ".jpg" && fileType != ".JPG" && fileType != "image/jpeg"
){
photo_flag = false;
$("#imgShow").attr("src", "temp.jpg");
alert("*提示：照片文件格式必须是jpg格式。");
return false;
}
//效验文件大小
if(fileSize > fSize){
photo_flag = false;
$("#imgShow").attr("src", "temp.jpg");
alert("*提示：照片文件大小超过了1M。");
return false;
}
if(photo_flag){
$("#imgShow").attr("src", filePath);
} else {
photo_flag = false;
$("#imgShow").attr("src", "temp.jpg");
alert("*提示：照片文件必须为120*160像素、小于1M的jpg格式文件。");
return false;
}
cont_modi.submit();
}
//-->
</script>
</head>
<body>
<form name="cont_modi" action="next.aspx" method="post" onsubmit="return Checkgo(this.strPhoto)">
<input type="file" name="strPhoto" id="strPhoto" accept="image/jpeg,image/jpg" placeholder="请选择照片文件" size="50" />
<input type="submit" value="上传照片" />
</form>
<div><img src="" id="imgShow" style="width:100px;height:100px"></img></div>
</body>
</html>
...全文
请发表友善的回复…
发表回复
薛定谔的犭苗 2019-01-31
- 打赏
- 举报
想抄代码的话，还是慢慢学技术比较好，以后再学写代码。
Checkgo 方法根本无法控制 <form> 是否提交，因为这个函数里边要做的是异步的操作。所以它只能用于一个普通按钮（而不是<form>），这样当异步回调来取得异步反馈时，那个时候才来决定是否提交 <form>。这就相当于用一个定时器 setTimer 方式延迟来提交 <form>，你要懂得异步的基础概念。[/quote]
谢谢您的建议，我是在利用假期时间免费为单位写一点小代码，力所能及地帮单位简化一点问题，平时工作实在太忙，年龄大了知识更新跟不上。谢谢指导。
以专业开发人员为伍 2019-01-31
- 打赏
- 举报
想抄代码的话，还是慢慢学技术比较好，以后再学写代码。
Checkgo 方法根本无法控制 <form> 是否提交，因为这个函数里边要做的是异步的操作。所以它只能用于一个普通按钮（而不是<form>），这样当异步回调来取得异步反馈时，那个时候才来决定是否提交 <form>。这就相当于用一个定时器 setTimer 方式延迟来提交 <form>，你要懂得异步的基础概念。
以专业开发人员为伍 2019-01-31
- 打赏
- 举报
Checkgo 函数在未触发 onloaded 之前就已经执行完了，立刻提交 <form>。
在执行 Checkgo 的过程中此时你注册 onloaded 有什么意义呢？
CaRrot_Love 2019-01-31
- 打赏
- 举报
reader.onloadend = function(event){
img.src = event.target.result;
var photo_flag=true;
img.onload = function(event) {
//校验图片尺寸
if(img.width != fWidth || img.height != fHeight){
photo_flag=false;
$("#imgShow").attr("src", "temp.jpg");
alert("*提示：照片尺寸不对。您只能上传"+fWidth+"*"+fHeight+"像素（宽*高）的照片。111");
alert(photo_flag+"111");
//////为何下面return false无法终止提交form提交？
return false;
}
filePath = this.src;
}
丰云 2019-01-29
- 打赏
- 举报
好好理解一下作用域的概念吧
return 永远都是退出当前作用域，
如果要退出多层作用域，得通过锚定
