限制上传文件的大小

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;  
	}
});
时间: 2024-08-26 16:03:19

限制上传文件的大小的相关文章

Windows服务器修改网站上传文件的大小限制

ASP程序 方法一: 修改该网站的的最大上传文件的大小限制 在Windows server上会出现上传大小受限制的问题,这是由于windows server的IIS管理器做了限制所致,IIS默认设置是最大只能上传200K的文件,下面介绍一下如何修改IIS设置,以使上传不受限制. 进入管理工具->Internet 信息服务(IIS)管理器,找到对应网站,打开该网站的功能页面,依次选择选择IIS->ASP->限制属性->最大请求主体实体限制.将其值修改为你需要的value,点击&quo

html5 如何实现客户端验证上传文件的大小

在HTML 5中,现在可以在客户端进行文件上传时的校验了,比如用户选择文件后,可以 马上校验文件的大小和属性等.本文章向码农介绍html5 如何实现客户端验证上传文件的大小,感兴趣的码农可以参考一下. 在HTML 5中,现在可以在客户端进行文件上传时的校验了,比如用户选择文件后,可以马上校验文件的大小和属性等,这其实时得益于浏览器端新增的对文件的校验能力,其中支持HTML 5的浏览器,都会实现W3C实现的文件API标准,其中可以读取客户端文件的各种信息和参数. 下面的例子如下,首先是HTML <

js 判断上传文件的大小

原先加了一个qq群,群里有人问道有没有办法在浏览器端获得上传文件的大小并做出限制,我自己并不知道方法,我觉得是不可以的,我在群里提出自己的见解的同时也向别人提出如果就解决办法也想一起知道,直到一大神出现解决了这个问题,才明白解决办法,忽然觉得这群里还是能学到新东西的!废话不多说了. 这是js判断文件大小的方法. function CheckImage(FileUpload) { var isIE = /msie/i.test(navigator.userAgent) && !window.

testlink 修改上传文件的大小限制

大家在使用testlink导入测试时,可能会遇到由于上传的文件太大,而不能上传的现象.当然建议大家在导入用例或者上传文件时,不要上传过大的文件,因为这样的速度确实非常慢.可是由于特殊的原因我们必须要导入或者上传大文件时怎么办呢? 这里主要修改两个参数: 1.打开文件config.inc.php,找到 $tlCfg->import_file_max_size_bytes = '409600';// in bytes $tlCfg->import_max_row = '10000'; // in

elementUI 上传文件图片大小加了限制后 仍然上传了

https://blog.csdn.net/chanlingmai5374/article/details/80558444  看了这位老哥的说法 在看看文档 才发现自己没认真看文档 <el-upload :beforeUpload="beforeAvatarUploadPdf" </el-upload> beforeAvatarUploadPdf(file){ var testmsg=file.name.substring(file.name.lastIndexOf

input file 文件上传,js控制上传文件的大小和格式

文件上传一般是用jquery的uploadify,比较好用.后面会出文章介绍uploadify这个插件. 但是,有时候为了偷懒,直接就用input 的file进行文件和图片等的上传,input file 可以控制上传的格式,但是是html5,很多浏览器不支持,请看我的文章对input file上传类型的控制. 下面我用javascript来控制文件上传的大小和类型. 贴出html代码: <form action="后端接口" enctype="multipart/for

修改PHP上传文件的大小限制

Warning: POST Content-Length of 35052172 bytes exceeds the limit of 8388608 bytes in Unknown on line 0 该条警告是PHP.ini中的配置有关. 上述错误信息的大致意思是,我们使用POST请求提交的数据大小超过了服务器的最大限制数 出现上述错误的原因是,在PHP的配置文件php.ini中,默认存在如下配置信息(在php.ini中,行首的分号";"表示当前行是注释,不会生效): ;脚本解析

【Nginx】上传文件的大小限制

阅读目录 > 解决方法 今天导入一份Excel文件,浏览器报"413"HTTP异常码. 第一反应检查应用程序所设的文件大小的过滤:第二个检查JS上传的文件大小限制. 后来,转念一想,有可能是Nginx过滤的,马上查看error.log,可见"client intended to send too large body". > 解决方法 在配置文件的http模块下,设置文件大小限制为20M.(默认是1M) client_max_body_size 20M;

js判断上传文件的大小,及确认文件是否在本地存在,兼容firefox、chrome、ie等浏览器

<pre name="code" class="javascript">上传图片文件的html标签 <input name="file" type="file" id="<span style="color:#ff0000;">file</span>" accept="image/gif,image/jpeg,image/png&quo