JavaScript獲取上傳文件容量

字號:


    我們有時候在上傳文件前要判斷文件的大小,通常有以下兩種方式:
    1 <!doctype html public "-//w3c//dtd html 4.0 transitional//en">
    2 <html>
    3 <body>
    4 <INPUT TYPE="file" NAME="file" SIZE="30" onchange="getFileSize(this)">
    5 <INPUT TYPE="file" NAME="file" SIZE="30" onchange="getFileSize(this.value)">
    6 </body>
    7 <script type="text/javascript">
    8
    9 function getFileSize(filePath)
    10 {
    11 var image=new Image();
    12 image.dynsrc=filePath;
    13 alert(image.fileSize);
    14 }
    15
    16 function getFileSize(fileObj)
    17 {
    18 var image=new Image();
    19 image.dynsrc=fileObj.value;
    20 var size = image.fileSize || fileObj.files[0].fileSize;
    21 if(size > 100000){
    22 alert(size);
    23 }
    24
    25 }
    26 </script>
    27 </html>
    但是以上代碼有一個問題,就是在給image.dynsrc賦值的時候,要有文件的操作權限,換句話說,IE7之后的版本為了提高安全性不允許瀏覽器對文件進行操作,故以上代碼不實用。
    以下代碼通過調(diào)用ActiveX來進行文件的讀取,需要啟用ActiveX的部分功能。
    <!doctype html public "-//w3c//dtd html 4.0 transitional//en">
    <html>
    <script type="text/javascript">
    function getFileSize(fileObj) {
    if (document.all) {
    window.oldOnError = window.onerror;
    window.onerror = function(err) {
    if (err.indexOf('utomation') != -1) {
    alert('No access to the file permissions.');
    return true;
    }
    else
    return false;
    };
    var fso = new ActiveXObject('Scripting.FileSystemObject');
    var file = fso.GetFile(fileName);
    window.onerror = window.oldOnError;
    return file.Size;
    }
    }
    </script>
    <body>
    <INPUT TYPE="file" NAME="file" SIZE="30" onchange="getFileSize(this)">
    </body>
    </html>