完美解决js校验文件大小

完美解决js校验文件大小,第1张

思路是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""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  

<html xmlns="http://www.w3.org/1999/xhtml">  

    <head>  

    <meta name="DEscription" contect="my code demo" />  

    <meta name="Author" contect="Michael@www.micmiu.com" />  

    <meta http-equiv="Content-Type" content="text/html charset=utf-8" />  

    <title>js 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(filesize>maxsize){  

                    alert(errMsg)  

                    return  

                }else{  

                    alert("文件大小符合要求")  

                    return  

                }  

            }catch(e){  

                alert(e)  

            }  

        }  

    </script>  

</html>

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(filesize>maxsize){

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)

}

你不如判断控制图片的CSS类或ID好过?不同图片在什么CSS情况下才显示。

补充:

试试这句,网上找的。

<script>

function getFileSize(o) {

x = window.XMLHttpRequest ? new window.XMLHttpRequest: new ActiveXObject("MSxml2.XMLHTTP")

x.open("HEAD", o.src, false)

x.send()

alert("大小:" + x.getResponseHeader("Content-Length"))

}

</script>

<img src="1.jpg" id="use" alt="" />

<input type="button" value="GET Size" onclick="getFileSize(document.getElementById('use'))" />


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/tougao/8128577.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-13
下一篇 2023-04-13

发表评论

登录后才能评论

评论列表(0条)

保存