[JavaScript] 在開始上傳前檢查圖片檔案大小

2010-09-21

57946
0
JavaScript

[JavaScript] 在開始上傳前檢查檔案大小

最近有此功能需求，因此查了些相關的資料，最後在不使用 Flash 及 ActiveX 等技術的情況下，只用JavaScript完成了多瀏覽器的功能實作，在此分享。

目前已測試過的瀏覽器：IE 6 , IE 7 , IE 8 , Firefox , Chrome；另外 Firefox 與 Chrome 的版本須為支援 Html 5 的版本。

以下為 HTML (此部分與 Bryan(不來ㄣ)大大的版本相同 )：


<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=big5">
    <title>上傳</title>
</head>
<body>
    <form action="upload.asp" method="POST" name="FileForm" enctype="multipart/form-data">
    <div align="center">
        圖片:
        <input type="file" name="file1" size="20" id="file1" />
        <input type="button" value="確定上傳" onclick="checkFile()" /></div>
    </form>
</body>
</html>

以下為 JavaScript：


<script src="http://code.jquery.com/jquery-1.4.2.min.js" type="text/javascript"></script>

<script language="JavaScript" type="text/javascript">
    var fileSize = 0; //檔案大小
    var SizeLimit = 1024;  //上傳上限，單位:byte

    function checkFile() {
        var f = document.getElementById("file1");
        //FOR IE
        if ($.browser.msie) {
            var img = new Image();
            img.onload = checkSize;
            img.src = f.value;
        }
        //FOR Firefox,Chrome
        else {
            fileSize = f.files.item(0).size;
            checkSize();
        }
    }

    //檢查檔案大小
    function checkSize() {
        //FOR IE FIX
        if ($.browser.msie) {
            fileSize = this.fileSize;
        }

        if (fileSize > SizeLimit) {
            Message((fileSize / 1024).toPrecision(4), (SizeLimit / 1024).toPrecision(2));
        } else {
            document.FileForm.submit();
        }
    }

    function Message(file, limit) {
        var msg = "您所選擇的檔案大小為 " + file + " kB\n已超過上傳上限 " + limit + " kB\n不允許上傳！"
        alert(msg);
    } 
</script>

參考資料：

topcat 姍舞之間的極度凝聚 - [轉貼]上傳檔案前，JavaScript檢查檔案格式、大小：http://www.dotblogs.com.tw/topcat/archive/2009/02/20/7250.aspx (Bryan(不來ㄣ)大大的版本 – For IE)

簡單過生活 - Check 上傳檔案大小：http://iammic.pixnet.net/blog/post/11866034 (iammic大大的版本 – For IE[ActiveX] & Firefox , Chrome)

2010/09/22 更新：

在 o 大大的指正後，將標題略為修改為針對圖片檔案的上傳之檔案大小的檢查，以避免因標題誤導了想找資料的訪客。

另外，在支援 HTML 5 的 Firefox 與 Chrome 的瀏覽器版本上，是可正確抓到各類型檔案大小的；而 IE 瀏覽器仍須透過 Flash 或 ActiveX 等技術才能取得圖片類型以外的檔案大小，在此作以上更正。

Cross

推到 Plurk! 分享

回首頁