2017-05-02 100 views
-1

我寫這有jQuery腳本當按下SAVE按鈕查看文件大小HTML表單之前,HTML表單檢查文件的大小。jQuery腳本上傳不工作

我已經盡了全力,但檢查未在HTML表單的所有工作。

請幫助我,提前感謝。這裏是我的代碼

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; 
 
}
<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>

+1

其實你的函數沒有任何地方叫,是什麼呢? – Fuzzzzel

+0

我該怎麼做..可以指導我調用這個函數。因爲我根據自己的知識盡了全力 –

回答

0

嗯,有幾件事情你的代碼錯誤。請參閱下面的固定版本。

這裏是改變帶來的變化:

  1. 使得腳本能夠選擇一個html標籤,你必須把腳本的身體結束。通過這個存在元素大家儘量選擇它
  2. 按鈕需要一個提交按鈕之前,所以你必須添加type="submit"
  3. 你想趕上提交 - 事件,所以你需要添加一個事件監聽器$("#myform").submit(function(event) { ... function body ... });
  4. 在這個函數中你可以處理提交事件。您調用validate()函數,如果失敗,則停止提交事件。
  5. 如果沒有文件被選擇的驗證功能不應該叫和形式不應該被提交,所以我修改了驗證功能進行檢查。

我還添加了代碼中的註釋,所以你可以看到什麼改變。

希望這會有所幫助。雖然我認爲你應該學習一些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>