js上傳文件時計算文件的大小（js大文件上傳）

本文目錄一覽：

• 1、js 如何獲取上傳文件的大小
• 2、完美解決js校驗文件大小
• 3、如何通過js獲取上傳文件尺寸
• 4、js怎麼判斷上傳文件的大小
• 5、IE8以上，用js獲取上傳文件大小和絕對路徑的實現代碼
• 6、圖片上傳控制，總上傳文件的大小（jsp版）

js 如何獲取上傳文件的大小

HTML 中input標籤有個類型是file。這個是可以上傳文件使用的。你可以直接操作這個標籤的size來獲取文件的大小。

可通過下面的方式 

html代碼：

js代碼：

var fileId = “uploadtest”;

var dom = document.getElementById(fileId);  

var fileSize =  dom.files[0].size;//文件的大小，單位為位元組B

完美解決js校驗文件大小

思路是img標籤中的dynsrc屬性。

在FireFox、Chrome瀏覽器中可以根據document.getElementById(「id_file」).files[0].size 獲取上傳文件的大小（位元組數），而IE瀏覽器中不支持該屬性，只能藉助img標籤的dynsrc屬性，來間接實現獲取文件的大小（但需要同意ActiveX控件的運行，但是不會引起上面的不友好、不安全的提示）。

參考如下：

!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”””  

html xmlns=””  

    head  

    meta name=”DEscription” contect=”my code demo” /  

    meta name=”Author” contect=”Michael@” /  

    meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /  

    titlejs check file size /title  

    /head  

    body  

        img id=”tempimg” dynsrc=”” src=”” style=”display:none” /  

        input type=”file” name=”file” id=”fileuploade” size=”40″ /  

        input type=”button” name =”check” value=”checkfilesize” onclick=”checkfile()”/  

    /body  

    script type=”text/javascript”  

        var maxsize = 2*1024*1024;//2M  

        var errMsg = “上傳的附件文件不能超過2M！！！”;  

        var tipMsg = “您的瀏覽器暫不支持計算上傳文件的大小，確保上傳文件不要超過2M，建議使用IE、FireFox、Chrome瀏覽器。”;  

        var  browserCfg = {};  

        var ua = window.navigator.userAgent;  

        if (ua.indexOf(“MSIE”)=1){  

            browserCfg.ie = true;  

        }else if(ua.indexOf(“Firefox”)=1){  

            browserCfg.firefox = true;  

        }else if(ua.indexOf(“Chrome”)=1){  

            browserCfg.chrome = true;  

        }  

        function checkfile(){  

            try{  

                var obj_file = document.getElementById(“fileuploade”);  

                if(obj_file.value==””){  

                    alert(“請先選擇上傳文件”);  

                    return;  

                }  

                var filesize = 0;  

                if(browserCfg.firefox || browserCfg.chrome ){  

                    filesize = obj_file.files[0].size;  

                }else if(browserCfg.ie){  

                    var obj_img = document.getElementById(‘tempimg’);  

                    obj_img.dynsrc=obj_file.value;  

                    filesize = obj_img.fileSize;  

                }else{  

                    alert(tipMsg);  

                return;  

                }  

                if(filesize==-1){  

                    alert(tipMsg);  

                    return;  

                }else if(filesizemaxsize){  

                    alert(errMsg);  

                    return;  

                }else{  

                    alert(“文件大小符合要求”);  

                    return;  

                }  

            }catch(e){  

                alert(e);  

            }  

        }  

    /script  

/html

如何通過js獲取上傳文件尺寸

input id=”file_Up” name=”file_Up” type=”file” onchange=”getFileSize(this.value)”/

input id=”sub_Import” type=”submit” value=”導入” /

js中function getFileSize() {

var btnsave = document.getElementById(“sub_Import”);

btnsave.disabled = true;

var filepath = “”;

var fileupload = document.getElementById(“file_Up”);

if (fileupload.value.length 5) {

alert(‘請選擇文件！’);

return;

}

var agent = window.navigator.userAgent;

if (agent.indexOf(“Firefox”) = 1) {

var maxsize = 4 * 1024 * 1024;

var size = fileupload.files[0].size;

if (size parseInt(maxsize)) {

alert(“文件超過大小！”);

return false;

js怎麼判斷上傳文件的大小

HTML 中input標籤有個類型是file。這個是可以上傳文件使用的。你可以直接操作這個標籤的size來獲取文件的大小。

可通過下面的方式 

html代碼：

js代碼：

var fileId = “uploadtest”;

var dom = document.getElementById(fileId);  

var fileSize =  dom.files[0].size;//文件的大小，單位為位元組B

IE8以上，用js獲取上傳文件大小和絕對路徑的實現代碼

js實現獲取文件大小：

var maxsize = 2*1024*1024;//定義最大為2M。

var errMsg = “上傳的附件文件不能超過2M！”;

var tipMsg = “您的瀏覽器暫不支持計算上傳文件的大小，確保上傳文件不要超過2M，建議使用IE、FireFox、Chrome瀏覽器。”;

var browserCfg = {};

var ua = window.navigator.userAgent;

if (ua.indexOf(“MSIE”)=1){

browserCfg.ie = true;

}else if(ua.indexOf(“Firefox”)=1){

browserCfg.firefox = true;

}else if(ua.indexOf(“Chrome”)=1){

browserCfg.chrome = true;

}

function checkfile(){

try{

var obj_file = document.getElementById(“fileuploade”);

if(obj_file.value==””){

alert(“請先選擇上傳文件”);

return;

}

var filesize = 0;

if(browserCfg.firefox || browserCfg.chrome ){

filesize = obj_file.files[0].size;

}else if(browserCfg.ie){

var obj_img = document.getElementById(‘tempimg’);

obj_img.dynsrc=obj_file.value;

filesize = obj_img.fileSize;

}else{

alert(tipMsg);

return;

}

if(filesize==-1){

alert(tipMsg);

return;

}else if(filesizemaxsize){

alert(errMsg);

return;

}else{

alert(“文件大小符合要求”);

return;

}

}catch(e){

alert(e);

}

}

js實現獲取絕對路徑：

function readFile(fileBrowser) {

if (navigator.userAgent.indexOf(“MSIE”) != -1) {

return getFilePath(fileBrowser);

} else if (navigator.userAgent.indexOf(“Firefox”) != -1 || navigator.userAgent.indexOf(“Mozilla”) != -1) {

return getFilePathWithFF(fileBrowser);

} else {

return;

}

}

function getFilePath(fileBrowser) {

alert(“ie”);

alert(fileBrowser.value);

}

function getFilePathWithFF(fileBrowser) {

try {

netscape.security.PrivilegeManager.enablePrivilege(“UniversalXPConnect”);

} catch(e) {

alert(‘由於瀏覽器安全問題 請按照以下設置 [1] 地址欄輸入 “about:config” ; [2] 右鍵 新建 – 布爾值 ; [3] 輸入 “signed.applets.codebase_principal_support” (忽略引號).’);

return;

}

var fileName = fileBrowser.value;

alert(“firefox”);

alert( fileName);

}

圖片上傳控制，總上傳文件的大小（jsp版）

把屬於某用戶的已經上傳了的所有照片大小計算出來；加上用戶正準備上傳的圖片大小，如果超過了某個值 就不許上傳；可以用js來判斷準備上傳文件的大小

js判斷上傳文件大小第一種方法是利用IE控件

html

input type=”file” name=”file1″ onchange=”ShowSize(this.value)”

script language=”JavaScript”

!–

function ShowSize(files)

{

var fso,f;

fso=new ActiveXObject(“Scripting.FileSystemObject”);

f=fso.GetFile(files);

if(f.size1024*4){

alert(f.size+” Bytes”);

}

}

//–

/script

/html

第二種方法是利用IE下，Image對象的屬性，如：fileCreatedDate、fileModifiedDate、fileSize、fileUpdatedDate、filters

限制：input type=”text” size=”4″ value=”10″ name=”fileSizeLimit” id=”fileSizeLimit”/ K

input type=”file” name=”file1″ id=”file1″ size=”40″ onchange=”changeSrc(this)”/

img src=”about:blank” id=”fileChecker” alt=”test” height=”18″/

script type=”text/javascript”

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 limit)

{

alert(“too large”);

}

else

{

alert(“ok”);

}

}

/script