如何在警告框中防止默认

时间:2017-12-13 07:50:08

标签: javascript alert preventdefault

Html代码,我正在调用上传方法和上传,我正在使用Php和javascript代码,我创建了upload()调用提交按钮,我只是想使用preventDefault()警报框的代码,因为当用户上传无效图像警告框时出现,并通过在注册了无效图像的警报框中单击确定

  <form role="form" action="registration.php" method="post" class="registration-
    form form-width" enctype="multipart/form-data" >
         <fieldset>
              <div class="form-top">
                   <div class="form-top-left">
                           <!-- <h3>Step 2 / 3</h3>
                            <p>Set up your account:</p> -->
                    </div>
                </div>
                    <div class="form-bottom">
                       <div class="form-group">
                          <label class="sr-only" for="company_name">Company Name:</label>
                          <input type="text" name="company_name" id="company_name" placeholder="Company Name" class="form-text form-control" required>
                          </div>
                          <div class="form-group">
                             <label class="sr-only" for="Founder_name">Founder Name</label>
                             <input type="text" name="founder_name" id="Founder_name" placeholder="Founder Name" class="form-text form-control" required>
                           </div>
                          <div class="form-group">
                            <label class="sr-only" for="form-email">Email</label>
                              <input type="text" name="form-email" placeholder="Email" class="form-email form-control" id="form-email" value="<?php echo $user->emailAddress ?>" readonly>
                              </div>    
                              <div class="form-group">
                              <label class="sr-only" for="form-password">password</label>
                              <input type="password" name="form-password" placeholder="password" class="form-password form-control" id="form-password" required>
                             </div> 

                          <div class="form-group">
                           <label class="sr-only" for="confirm_password">Repeat password</label>
                           <input type="password" name="confirm_password" placeholder="confirm password" class="form-repeat-password form-control" id="form-repeat-password" >
                           <span id='message'></span>
                             </div>
            <button type="button" class="btn btn-next" id="next">Next</button>
                               </div>
                            </fieldset>

                          <fieldset>
                             <div class="form-top">
                              <div class="form-top-left">
                                <!--    <h3>Step 3 / 3</h3>
                                   <p>Social media profiles:</p> -->
                               </div>

                               </div>
                           <div class="form-bottom">
                              <div class="form-group">
                               <label class="sr-only" for="form-facebook">company url</label>
                             <input type="url" name="company_url"  id="company_url" placeholder="company Url" class="form-url form-control">
                                </div>

                            <div class="form-group">
                                <label for="sel1">width</label>
                                    <select class="form-control" id="width" name="width">
                                    <option value="" disabled selected>Select your option</option>
                                                <option>100</option>
                                                <option>200</option>
                                                <option>200</option>
                                                </select>
                                </div>
                            <div class="form-group">
                        <label for="sel1">Height</label>
                                <select class="form-control" id="height" name="height">
                            <option value="" disabled selected>Select your option</option>
                                                <option>100</option>
                                                <option>100</option>
                                                <option>200</option>
                            </select>
                            </div>                      

                             <div class="form-group">
                              <label for="file">Company Logo</label>
                                            <input type="file" name="fileUpload"  placeholder="company logo" class="form-google-plus form-control" id="fileUpload">
                                        </div>
                                        <button type="button" class="btn btn-previous">Previous</button>
                                        <button name="submit" type="submit" class="btn" onclick="return Upload()">Submit</button>
                                    </div>
                                </fieldset>
                            </form>

     <script type="text/javascript">
          function Upload() {
        //Get reference of FileUpload.
        var fileUpload = document.getElementById("fileUpload");
        var user_height= document.getElementById('height').value;
        var user_width=  document.getElementById('width').value;
        //Check whether the file is valid Image.
        var regex = new RegExp("([a-zA-Z0-9\s_\\.\-:])+(.jpg|.png|.gif)$");
        if (regex.test(fileUpload.value.toLowerCase())) {

            //Check whether HTML5 is supported.
            if (typeof (fileUpload.files) != "undefined") {
                //Initiate the FileReader object.
                var reader = new FileReader();
                //Read the contents of Image File.
                reader.readAsDataURL(fileUpload.files[0]);
                reader.onload = function (e) {
                    //Initiate the JavaScript Image object.
                    var image = new Image();

                    //Set the Base64 string return from FileReader as source.
                    image.src = e.target.result;

                    //Validate the File Height and Width.
                    image.onload = function () {
                        var height = this.height;
                        var width = this.width;
                        if (height > user_height || width > user_width) {
                            alert("Height and Width must be equal to given size.");
                            return false;
                        }
                        alert("Uploaded image has valid Height and Width.");
                        return true;
                    };

                }
            } else {
                alert("This browser does not support HTML5.");
                return false;
            }
        } else {
            alert("Please select a valid Image file.");
            return false;
        }
    }
    </script>

0 个答案:

没有答案