1

知道如何在验证 javascript 函数中获取图像的字节大小，以便提示用户选择有效的图像大小。我已经看到其他解决表单逻辑问题的答案，但我想知道是否可以在验证 javascript 函数中获得大小。谢谢

这是我的表单相关代码：

<form action="index.php" method="post" enctype="multipart/form-data" onsubmit="return validateForm(this)">
    <script>
        function validateForm(form) {
            var image_name = form.image.value;
            if (image_name == null || image_name == "") {
                alert('Select an image');
                return false;
            } else return true;
        }
    </script>
    <label> Image (300 KB max.) <input type="file" name="image" /> </label>
    <input type="submit" value="Submit" name="submit" />
</form>
4

2 回答 2

2

HTML5 File API 支持文件大小检查。 http://www.html5rocks.com/en/tutorials/file/dndfiles/

    <input type="file" id="image" />

    var size = document.getElementById("image").files[0].size;

or  
     var size = document.getElementsByName("image")[0].files[0].size; // edit added

但是，对文件大小进行服务器端验证也是一个更好的主意。

注意：这不适用于旧版浏览器

还要检查这个问题：
Detecting file upload size on the client? 如果超出我选择的上传限制，则停止上传过程

小提琴http://jsfiddle.net/wKvf8/

于 2013-05-24T21:45:10.403 回答
1 
 <?php
  if(isset($_POST['submit'])) {
     $first_name=$_POST['fname'];
    echo 'Entered First Name = '.$first_name;
 }
 ?>
 <html>

 <form method="post" enctype="multipart/form-data" action="">
     <label for="fname"> First Name: </label> <input  type="text" name="fname"  /> <br /><br />
     <label for="file"> Select File: </label> <input  type="file" id="file" />
     <input type="submit" name="submit" value="Submit" />
 </form>

 <script>
 document.forms[0].addEventListener('submit', function( evt ) {
     var file = document.getElementById('file').files[0];

     if(file && file.size < 18000) { 
         //Submit form
        alert('Size is valid');
     } else {
        alert('pic too big');
        evt.preventDefault();
     }
 }, false);
 </script>
 </html>
于 2013-05-26T17:06:01.617 回答