IE+JS: 上傳之前檢測圖檔檔案大小October

不得不佩服此人的巧妙的思想,簡單幾句話搞定了!

檔案上傳之前的檢測，通常是通過檔案名來判斷檔案類型是否合法，但是要想檢測檔案的大小很難辦到，除非在本地或者使用控件。不過在IE下img有幾個附加的屬性，如：fileCreatedDate、fileModifiedDate、fileSize、fileUpdatedDate、filters，我們可以通過這些屬性來擷取圖檔檔案的部分資訊，如檔案大小，我們用file表單同img标簽結合，就能夠在上傳之前判斷圖檔檔案的大小是否合法了。下面是Demo:

限制： K

還有一個小小的發現就是，IE下動畫的onload事件是在每次循環開始都觸發，這樣我們可以通過他來達到和js裡setInterval()函數一樣的效果，如：

 loops: 0

<a></a>

這兩個例子的源代碼如下:

第一個：

限制：&lt;input type="text" size="4" value="10" name="fileSizeLimit" id="fileSizeLimit"/&gt; K

&lt;input type="file" name="file1" id="file1" size="40" onchange="changeSrc(this)"/&gt;

&lt;img src="about:blank" id="fileChecker" alt="test"  height="18"/&gt;

&lt;script type="text/javascript"&gt;

var oFileChecker = document.getElementById("fileChecker");

function changeSrc(filePicker)

{

    oFileChecker.src = filePicker.value;

}

oFileChecker.onreadystatechange = function ()

    if (oFileChecker.readyState == "complete")

    {

        checkSize();

    }

function checkSize()

    var limit  = document.getElementById("fileSizeLimit").value * 1024;

    if (oFileChecker.fileSize &gt; limit)

        alert("too large");

    else

        alert("ok");

&lt;/script&gt; 

第二個：

&lt;img src="monkey.gif" id="monkey" alt="monkey" /&gt; loops: &lt;span id="loopsNum"&gt;&lt;/span&gt;

var loops = 0;

document.getElementById("monkey").onload = function ()

    document.getElementById("loopsNum").innerText= loops;

    loops ++;

另外補充一些手冊裡的東西：

&lt;input type="hidden" name="MAX_FILE_SIZE" value="30000" /&gt;

MAX_FILE_SIZE 隐藏字段（機關為位元組）必須先于檔案輸入字段，其值為接收檔案的最大尺寸。這是對浏覽器的一個建議，PHP 也會檢查此項。在浏覽器端可以簡單繞過此設定，是以不要指望用此特性來阻擋大檔案。實際上，PHP 設定中的上傳檔案最大值是不會失效的。但是最好還是在表單中加上此項目，因為它可以避免使用者在花時間等待上傳大檔案之後才發現檔案過大上傳失敗的麻煩。

注意：本文所讨論的特性僅在IE下有效。