求助：为何img.onload的return false无法终止提交表单？改了一整天了，求大神指导

薛定谔的犭苗 2019-01-29 11:23:37
　　急着做一个单位自己用的小项目，为何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>
...全文
995 12 打赏 收藏 转发到动态 举报
写回复
用AI写文章
12 条回复
切换为时间正序
请发表友善的回复…
发表回复
xgrrandom 2019-02-03
  • 打赏
  • 举报
 回复
引用 12 楼 qq_14823749 的回复：
还没有解决吗？
这个不难啊
麦草CMS 2019-01-30
  • 打赏
  • 举报
 回复
<!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">
<!--
var flag = true;//////////////////////////////////////
function Checkgo(obj) {
//图片验证
if(!flag){ return false;}///////////////////////////////////
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提交？
flag = false;//////////////////////////////
return;////////////////////////////////////////
}
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>

nayi_224 2019-01-30
  • 打赏
  • 举报
 回复
onloadend是异步方法，应该把submit换成button，然后把reader.onloadend放到代码最后，通过判断，手动调用submit。
薛定谔的犭苗 2019-01-30
  • 打赏
  • 举报
 回复
引用 3 楼 天际的海浪 的回复:
只有onsbmit事件(也就是Checkgo函数)return false才能终止提交表单。 在别的事件中return false没用。 你可以设置个全局变量。在别的事件中改变这个全局变量的值。最后在onsbmit事件判断这个全局变量的值来决定返回 true 还是 false
亲人，可以帮我修改一下代码贴出来吗？一把年纪全是自学的，你指导的有些地方我理解不了。耽误您时间了，谢谢啊。
薛定谔的犭苗 2019-01-30
  • 打赏
  • 举报
 回复
引用 8 楼 nayi_224 的回复:
onloadend是异步方法，应该把submit换成button，然后把reader.onloadend放到代码最后，通过判断，手动调用submit。
今天出差，晚上回来之后在办公室试了一晚上还没调好，哪位大家有时间帮我远程看一下吗？我水平太菜了，这个小项目卡在这里两整天了。谢谢亲们啊。QQ：16136899，微信：18605370302
薛定谔的犭苗 2019-01-30
  • 打赏
  • 举报
 回复
引用 6 楼 jijz243292892的回复:
[quote=引用 5 楼 jijz243292892 的回复:]
function checkGo(e, obj){

            photo_flag = true;

             var ff = $("#strPhoto").val();

        if(ff == null || ff == ""){

            alert("*提示：请选择要上传的照片文件。"); 

            e.preventDefault();

            return;

        }else if(!/.(jpg|jpeg)$/.test(ff)){

            alert("*提示：照片文件格式必须为jpg格式。");

            e.preventDefault();

            return;

        }

.....

}

onsubmit="checkGo(event, this.strPhoto.)"

对不起，开始没注意是后面的，正如前面所说，你在页面设置一个全局变量 var flag = true，在onload的回调中赋flag = false;
在checkGo一开始判断flag为false是 return false;或e.preventDefault();return;[/quote] 嗯嗯，我出差了，今天晚上回单位，到单位我试一下再请教您哈，谢谢谢谢。
薛定谔的犭苗 2019-01-29
  • 打赏
  • 举报
 回复
引用 1 楼 hookee 的回复:
在这里return false只是针对onrenderend 和 onstatechange事件。 组织递交需要针对onsbmit事件，要Checkgo返回false。 换句话说，上面的代码只是在Checkgo里定义了2个事件处理函数，事件处理函数里的返回和Checkgo的返回没关系, 事件处理函数的执行，和Checkgo也没关系。 、
谢谢hookee大神，能帮我修改一下吗？谢谢您！水平太菜，自己义务写点代码给自己单位用。感激！
hookee 2019-01-29
  • 打赏
  • 举报
 回复
在这里return false只是针对onrenderend 和 onstatechange事件。 组织递交需要针对onsbmit事件，要Checkgo返回false。 换句话说，上面的代码只是在Checkgo里定义了2个事件处理函数，事件处理函数里的返回和Checkgo的返回没关系, 事件处理函数的执行，和Checkgo也没关系。 、
麦草CMS 2019-01-29
  • 打赏
  • 举报
 回复
引用 5 楼 jijz243292892 的回复:
function checkGo(e, obj){

            photo_flag = true;

             var ff = $("#strPhoto").val();

        if(ff == null || ff == ""){

            alert("*提示：请选择要上传的照片文件。"); 

            e.preventDefault();

            return;

        }else if(!/.(jpg|jpeg)$/.test(ff)){

            alert("*提示：照片文件格式必须为jpg格式。");

            e.preventDefault();

            return;

        }

.....

}

onsubmit="checkGo(event, this.strPhoto.)"

对不起，开始没注意是后面的，正如前面所说，你在页面设置一个全局变量 var flag = true，在onload的回调中赋flag = false;
在checkGo一开始判断flag为false是 return false;或e.preventDefault();return;
麦草CMS 2019-01-29
  • 打赏
  • 举报
 回复 
function checkGo(e, obj){

            photo_flag = true;

             var ff = $("#strPhoto").val();

        if(ff == null || ff == ""){

            alert("*提示：请选择要上传的照片文件。"); 

            e.preventDefault();

            return;

        }else if(!/.(jpg|jpeg)$/.test(ff)){

            alert("*提示：照片文件格式必须为jpg格式。");

            e.preventDefault();

            return;

        }

.....

}

onsubmit="checkGo(event, this.strPhoto.)"
虎子8 2019-01-29
  • 打赏
  • 举报
 回复
我是用chrome测试的 首先建议你测试用console.log 不要用alert，这个会对执行顺序让你产生错误的认识。
问题很简单你的img.onload 是个回调函数。 点上传时Checkgo其实没有执行到任何return onsbmit会继续。 如果return false onsbmit会停掉
天际的海浪 2019-01-29
  • 打赏
  • 举报
 回复
只有onsbmit事件(也就是Checkgo函数)return false才能终止提交表单。 在别的事件中return false没用。 你可以设置个全局变量。在别的事件中改变这个全局变量的值。最后在onsbmit事件判断这个全局变量的值来决定返回 true 还是 false
http://c.biancheng.net/
http://c.biancheng.net/view/2343.html 标题是：C++ static_cast、dynamic_cast、const_cast和reinterpret_cast（四种类型转换运算符）http://c.biancheng.net/view/410.html 标题是：C++强制类型转换运算符（static_cast、reinterpret_cast、const_cast和dynamic_cast）
校招基本告一段落，总结一下
校招的这段时间学习到了很多 最终大概是签约上海美团点评 用Word总结了很多问题。发布在这里 7-13： 1：flex项目嵌套flex项目怎么算？ 你知道Flex项目也可以成为Flex容器吗？是的，是可能的！ 你想嵌套多深就嵌套多深（不过理智的做法是保持一个合理的水平）。 2:总结flexbox 3：规划布局 4：CSS选择器 5：现代各种布局 6：Hexo ...
269个JavaScript工具函数
// 匹配正整数 let isPositiveNum = val => { return /^[1-9]\d*$/.test(val); }; console.log(isPositiveNum(9)) //true console.log(isPositiveNum(2.2)) //false 2.匹配负整数 // 匹配负整数 let isNegativeNum = val => { return /^-[1-9]\d*$/.test(val); }; console.log(i
SpringMVC
学SpringMVC使我快乐!
Web前端性能优化——如何提高页面加载速度
转载：https://www.cnblogs.com/MarcoHan/p/5295398.html 前言：  在同样的网络环境下，两个同样能满足你的需求的网站，一个“Duang”的一下就加载出来了，一个纠结了半天才出来，你会选择哪个？研究表明：用户最满意的打开网页时间是2-5秒，如果等待超过10秒，99%的用户会关闭这个网页。也许这样讲，各位还不会有太多感触，接下来我列举一组数据：Googl...
JavaScript

87,993

社区成员

224,689

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章