0

在上传之前，我已经获得了这个 JavaScript 脚本来限制最大文件大小，但我不确定如何使用我当前的代码来实现它。

这是JavaScript：

<script type="text/javascript">

            function handleFileSelect(evt) {
  var files = evt.target.files; // FileList object

  // files is a FileList of File objects. List some properties.
  var output = [];
  for (var i = 0, f; f = files[i]; i++) {
   console.log(f.size);        /*<--Here is your size of the file! :D*/
  }
}

 document.getElementById('files').addEventListener('change', handleFileSelect, false);

</script>

还有我的 HTML：

<label>Upload Image</label>
<input type="file" name="image" /><br />
<input type="hidden" name="MAX_FILE_SIZE" value="5120" /></p>
<p><input type="submit" id="submit" value="Upload" />

修改后的代码：

  <p><label>Upload Image</label>

  <script type="text/javascript">
 function handleFileSelect(evt) {
   var files = evt.target.files; // FileList object
    var max_size = 5120; // Max file size

  // files is a FileList of File objects. List some properties.
  var output = [];
   for (var i = 0, f; f = files[i]; i++) {
    // console.log(f.size);
     if(f.size > max_size) { // Check if file size is larger than max_size
     alert("Sorry, but the file that you selected is too large. Please upload a file that is no larger than " + max_size + " KB.");
      return false;
    } // end if
   } // end for loop
 } //  end function

 document.getElementById('files').addEventListener('change', handleFileSelect, false);
 </script>

                <input type="file" name="image" id="files"/><br />
 <input type="hidden" name="MAX_FILE_SIZE" value="5120" /></p>
                <p><input type="submit" id="submit" value="Upload" />
            </p>
       <p>&nbsp;</p>
 </form>
4

2 回答 2

4

只需在文件输入中添加一个id属性，因为脚本正在寻找一个带有文件id的元素：

<label>Upload Image</label>
<input type="file" name="image" id="files" /><br />
<input type="hidden" name="MAX_FILE_SIZE" value="5120" />
<p><input type="submit" id="submit" value="Upload" />​&lt;/p>​​​​​​​​​​​​​​​​​​​​​​​​​​​

http://jsfiddle.net/RnuT8/

顺便说一句，请注意，只需禁用 JavaScript 或直接将文件上传到服务器而不使用您的表单，即可轻松绕过此 JavaScript。我建议您也使用服务器端 PHP 上传脚本检查文件大小。

修改后的代码

我已经修改了您的脚本，因此您可以输入最大尺寸值，脚本将检查它是否大于max_size：

window.onload = function() {

    function handleFileSelect(evt) {
      var files = evt.target.files; // FileList object
      var max_size = 5120; // Max file size
    
      // files is a FileList of File objects. List some properties.
      var output = [];
      for (var i = 0, f; f = files[i]; i++) {
       // console.log(f.size);
        if(f.size > max_size) { // Check if file size is larger than max_size
          alert("Sorry, but the file that you selected is too large. Please upload a file that is no larger than " + max_size + " KB.");
          return false;
        } // end if
      } // end for loop
    } //  end function

   document.getElementById('files').addEventListener('change', handleFileSelect, false);
}

但请记住，这是可以通过的，并且文件大小也应该在服务器上进行验证（JavaScript 也很好并且可以加快速度，但是如果你想要安全，你也必须在服务器上验证它）。

于 2012-10-03T20:38:07.580 回答
1

该脚本正在寻找 id 为“files”的元素。尝试在输入中添加 id，如下所示：

<input type="file" id="files" name="image" />
于 2012-10-03T20:38:21.673 回答