Fatal编程技术网
  • javascript/
  • Javascript jquery脚本在上传前检查HTML表单中的文件大小不起作用

Javascript jquery脚本在上传前检查HTML表单中的文件大小不起作用

javascript jquery html

Javascript jquery脚本在上传前检查HTML表单中的文件大小不起作用,javascript,jquery,html,Javascript,Jquery,Html,我已经编写了一个HTML表单，它有一个jquery脚本，可以在按下保存按钮时检查文件大小 我已经尽了最大努力，但是HTML表单中的检查根本不起作用 请帮助我并提前感谢我。这是我的密码 函数验证（）{ $（“#文件错误”）.html（“”）； $（“.demoInputBox”）.css（“边框颜色”，“#f0”）； var file_size=$（'#filetoupload'）[0]。文件[0]。大小； 如果（文件大小>2097152）{ $（“#file_error”）.html（“文件大

我已经编写了一个HTML表单，它有一个jquery脚本，可以在按下保存按钮时检查文件大小

我已经尽了最大努力，但是HTML表单中的检查根本不起作用

请帮助我并提前感谢我。这是我的密码

函数验证（）{
$（“#文件错误”）.html（“”）；
$（“.demoInputBox”）.css（“边框颜色”，“#f0”）；
var file_size=$（'#filetoupload'）[0]。文件[0]。大小；
如果（文件大小>2097152）{
$（“#file_error”）.html（“文件大小大于2MB”）；
$（“.demoInputBox”）.css（“边框颜色”，“#FF0000”）；
返回false；
}
返回true；
}

上传你的设计
地址
城市
拯救
好吧，你的代码有几个地方出了问题。请参阅下面的固定版本

以下是改变和改变的原因：

  • 要使脚本能够选择html标记，必须将脚本放在正文的末尾。这样，在您尝试选择元素之前，该元素已存在
  • 该按钮需要是提交按钮，因此您必须添加
    type=“submit”
  • 您希望捕获提交事件，因此必须添加事件侦听器
    $（“#myform”）.submit（函数（事件）{…函数体…}）
  • 在此函数中，您可以处理提交事件。调用validate（）-函数，如果失败，则停止提交事件
  • 如果未选择任何文件，则不应调用验证函数，也不应提交表单，因此我修改了验证函数以检查这一点
    • 我还在代码中添加了注释，这样您就可以看到发生了什么变化

    希望这有帮助。尽管我认为您应该学习一些javascript和jQuery，因为您遗漏了许多基本点—祝您好运，并享受编写代码的乐趣

    <html lang="en">
    <head>
        <!--Srcipt to check file size-->
        <script src="http://code.jquery.com/jquery-2.1.1.js"></script>

    </head>

    <body>
        <!-- Added an ID to the form to make it selectable even on pages with multiple forms -->
        <form id="myform" class="form-horizontal" action="submitdesign-add.php"  enctype="multipart/form-data" method="post">
            <fieldset>
                <!-- Form Name -->

                <!-- File Button --> 
                <div class="form-group">
                    <label class="col-md-3 control-label" for="dname">Upload Your Design </label>  
                    <div class="col-md-8">
                        <input type="file" name="filetoupload" id="filetoupload" class="demoInputBox" />
                        <span id="file_error"/>
                    </div>
                </div>


                <!-- Text input-->
                <div class="form-group">
                    <label class="col-md-3 control-label" for="daddress">Address</label>  
                    <div class="col-md-8">
                        <input id="daddress" name="daddress" type="text" maxlength="95" placeholder="Enter Your Address here" class="form-control input-md" />
                    </div>
                </div>

                <!-- Text input-->
                <div class="form-group">
                    <label class="col-md-3 control-label" for="dcity">City</label>  
                    <div class="col-md-8">
                        <input id="dcity" name="dcity" type="text" maxlength="45" placeholder="Enter Your City here" class="form-control input-md" />
                    </div>
                </div>

                <!-- Button -->
                <div class="form-group">
                    <label class="col-md-3 control-label" for="singlebutton"/>
                    <div class="col-md-3">
                        <!-- Added type="submit" to make the button a submit-button -->
                        <button type="submit" id="singlebutton" name="singlebutton" class="btn btn-success">Save</button>
                    </div>
                </div>

            </fieldset>

        </form>
        <script>


        function validate() {
            $("#file_error").html("");
            $(".demoInputBox").css("border-color","#F0F0F0");

            // Test if any file was selected else return false
            if(file_size = $('#filetoupload')[0].files.length == 0) {
                alert("Please select file");
                return false;
            }

            var file_size = $('#filetoupload')[0].files[0].size;
            if(file_size>2097152) {
                $("#file_error").html("File size is greater than 2MB");
                $(".demoInputBox").css("border-color","#FF0000");
                return false;
            } 
            return true;

        }

        /*
         * Bind Event-Listener to submit-button
         */
        $("#myform").submit(function(event) {

            // If validation fails stop sub
            if(validate()) {
                // Stop event of submitting the form
                event.preventDefault();
            }
        });
        </script>
            </body>
        </html> 

    
上传你的设计
地址
城市
拯救
函数验证（）{
$（“#文件错误”）.html（“”）；
$（“.demoInputBox”）.css（“边框颜色”，“#f0”）；
//测试是否选择了任何文件，否则返回false
if（file_size=$（'#filetoupload'）[0].files.length==0）{
警报（“请选择文件”）；
返回false；
}
var file_size=$（'#filetoupload'）[0]。文件[0]。大小；
如果（文件大小>2097152）{
$（“#file_error”）.html（“文件大小大于2MB”）；
$（“.demoInputBox”）.css（“边框颜色”，“#FF0000”）；
返回false；
} 
返回true；
}
/*
*“将事件侦听器绑定到提交”按钮
*/
$（“#myform”）.submit（函数（事件）{
//如果验证失败，停止sub
if（validate（））{
//停止提交表单的事件
event.preventDefault（）；
}
});
    实际上你的函数没有在任何地方被调用，是吗？我该怎么做。。你能指导我调用这个函数吗。因为根据我的知识，我尽了最大的努力