温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

限制上传文件的大小

发布时间:2020-07-04 10:02:38 来源:网络 阅读:283 作者:爱笑嘚蛋蛋 栏目:开发技术

HTML

<div class="form-group">
    <label class="col-sm-3 col-sm-6 control-label">图片</label>
    <span class="problem-must"></span>
    <div class="col-sm-8">
        <a class="fb-upload" href="javascript:void(0);"> 
            <input class="form-control" name="pic" type="file" accept=".gif,.jpg,.png,.jpeg" /> 
            <span class="fb-img">上传图片</span>
	</a>
    </div>
</div>

css(仿bootstrap的input样式)

.fb-img{ 
    color: gray;
    display: inline-block;
    padding: 6px 12px;
    text-align: left;
    border:1px solid #ccc;
    border-radius:4px;
    height:34px;
    line-height:1.42857;
    width:100%;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
    transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
    }
.form-group input[type="file"]{
    cursor: pointer;
    opacity: 0;
    position: absolute;
    top: 0;
    }

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;  
}
$(".fb-upload").on("change","input[type='file']",function(){
	var filePath = $(this).val();
	var arr = filePath.split('\\');
	var fileName = arr[arr.length-1];
	var filesize = 0;  
	if(browserCfg.firefox || browserCfg.chrome ){  
		filesize = $(this)[0].files[0].size;  
	}else if(browserCfg.ie){  
		var obj_img = new Image();  
		obj_img.dynsrc = fileName;  
		filesize = obj_img.fileSize;  
	}else{
		alert(tipMsg);
		return;  
	}
	if(filesize ==-1){  
		alert(tipMsg);
		return;  
	}else if(filesize > maxsize){
		
		alert(errMsg);
		return;  
	}else{
		$(".fb-img").html("");
		$(".fb-img").html(fileName);
		$(".fb-img").css({"color":"#555"});
		return;  
	}
});


向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI