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

スクリプトはof filesidを持つ要素を探しているため、ファイル入力に属性を追加するだけです: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

スクリプトは、「files」という ID を持つ要素を探しています。次のように、入力に id を追加してみてください。

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