Question

我写了一个HTML表单，它有一个jquery脚本，用于在按下SAVE按钮时检查文件大小。

我已经尽了最大努力，但HTML表单中的检查完全无效。

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

＆＃13;

function validate() {
  $("#file_error").html("");
  $(".demoInputBox").css("border-color", "#F0F0F0");
  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;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form 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"></span>
      </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"></label>
      <div class="col-md-3">
        <button id="singlebutton" name="singlebutton" class="btn btn-success">Save</button>
      </div>
    </div>

  </fieldset>

</form>

＆＃13;

Answer 1

嗯，你的代码有几个问题。请参阅下面的固定版本。

这里有什么改变并带来了不同之处：

要使脚本能够选择html标记，您必须将脚本放在正文的末尾。在您尝试选择它之前，元素存在
该按钮必须是提交按钮，因此您必须添加type="submit"
您想捕获提交事件，因此您必须添加事件监听器$("#myform").submit(function(event) { ... function body ... });
在此功能中，您可以处理提交事件。您调用validate（） - 函数，如果失败，则停止提交事件。
如果没有选择文件，则不应调用validate函数并且不应提交表单，因此我修改了validate-function以检查它。

我还在代码中添加了注释，以便您可以看到更改的内容。

希望这会有所帮助。虽然我认为你应该学习一些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>

jquery脚本在上传不工作之前以HTML格式检查文件大小

1 个答案: