思路是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="[email protected]" />
<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>
<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
}
else {
btnsave.disabled = false
return true
}
}
else {
fileupload.select()
fileupload.blur()
filepath = document.selection.createRange().text
try {
var fso, f, fname, fsize
var flength = 4 * 1024 //设置上传的文件最大值（单位：kb），超过此值则不上传。
fso = new ActiveXObject("Scripting.FileSystemObject")
f = fso.GetFile(filepath) //文件的物理路径
fname = fso.GetFileName(filepath) //文件名（包括扩展名）
fsize = f.Size //文件大小（bit）
fsize = fsize / 1024
//去掉注释，可以测试
alert("文件路径：" + f)
alert("文件名：" + fname)
alert("文件大小：" + fsize + "kb")
if (fsize > flength) {
alert("上传的文件到小为：" + fsize + "kb,\n超过最大限度" + flength + "kb,不允许上传 ")
return false
}
else {
btnsave.disabled = false
return true
}
} catch (e) {
alert(e + "\n 跳出此消息框，是由于你的activex控件没有设置好,\n" +
"你可以在浏览器菜单栏上依次选择\n" +
"工具->internet选项->\"安全\"选项卡->自定义级别,\n" +
"打开\"安全设置\"对话框，把\"对没有标记为安全的\n" +
"ActiveX控件进行初始化和脚本运行\"，改为\"启动\"即可")
return false
}
}
}
$("#ms_upload_file").change(function(){//检验非空和文件大小
if($(this).val() !== '' &&checkSize(this)) {//其他 *** 作
}
})/**
* 函数：检查上传文件大小
* 输入：input的js对象
* 输出：
**/function checkSize(input) {
var Sys = {} var flag var filesize = 0 //判断浏览器种类
if (navigator.userAgent.indexOf("MSIE") >0) {
Sys.ie=true
}if (navigator.userAgent.indexOf("Firefox")>0) {
Sys.firefox=true
}//获取文件大小
if (Sys.firefox) {
filesize = input.files[0].size
} else if (Sys.ie){var fileobject = new ActiveXObject ("Scripting.FileSystemObject")//获取上传文件的对象
var file = fileobject.GetFile (input.value)//获取上传的文件
filesize = file.Size//文件大小
}//判断是否符合要求
if (filesize / (1024 * 1024) <5 ) {
flag = true
} else {
alert("附件过大，建议不要超过5M！")
flag = false
}return flag
}
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）