Question

我已经写了一个HTML表单，它通过PHP脚本上传数据。我已经在PHP脚本中调用了检查，通过HTML表单调用，以检查文件大小和类型，这非常正常，但是，我正在寻找一个Javascript或在执行PHP脚本之前应该检查文件类型和大小的客户端脚本导致执行php脚本时我回到HTML表单我的所有表单数据都丢失了，我必须以相同的形式重新输入整个数据，我想避免这样做。

简单来说，我想要的是我不能通过PHP脚本发布数据，除非文件大小和文件类型条件得到满足。

请帮忙，这是我的代码：

        <head>
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

        <!-- Optional theme -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

        <!-- Latest compiled and minified JavaScript -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
        </head>

        <body>

        <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"><mark>UPLOAD YOUR FILE...</mark> <u>Only JPG, JPEG, GIF, PNG files upto size 2 MB are allowed</u></label> 
            <div class="col-md-8">
            <input type="file"  required  maxlength="80" name="fileToUpload" id="fileToUpload" accept="image/*" >
          </div>
        </div>

        <hr>




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

          </div>
        </div>

        <!-- Text input-->
        <div class="form-group">
          <label class="col-md-3 control-label" for="demail">Email</label>  
          <div class="col-md-8">
          <input id="demail" name="demail" type="email" maxlength="45" placeholder="Enter Your Email 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>
        <hr>
        <br>
        <br>
        </body>
        </html>

Answer 1

您可以通过jquery检查文件大小和类型，使用此

 jQuery(document).ready(function(){
     $('#fileToUpload').bind('change', function() {
            //For size checks
            var file_size = this.files[0].size;
            if(file_size>2097152) {
                alert("File size is greater than 2MB");
                return false;
            }

            //For extension checks
            var filename = $("#fileToUpload").val();
            var extension = filename.replace(/^.*\./, '');
            if (extension == 'jpg' || extension == 'jpeg' || extension == 'png' || extension == 'gif') {
                return true;
            } else {
                alert("Invalid file type");
                return false;
            }
            return true;
    });
});

客户端脚本在通过PHP脚本上载HTML表单之前检查文件大小和类型

1 个答案: