很多时候要限制上传图片大小,比如限制在100KB以下,用javascript可以实现。但是在使用img.filesize时,图片尺寸一大了就会返
回-1,解决办法是在浏览选择好图片路径以后,加入一个默认的预览功能,即图片上传路径input框属性中加入一个changesrc函数(定义见下
面),代码<input type="file" name="file" size="10"
id="pic" onchange="changesrc()"/>。经过预览功能就可以将图片对象初始化,这时点上传触发checkpic函数时,用filesize就可以获得图片真实大小了。
代码如下:
<script language="JavaScript" type="text/JavaScript">
var img=null;
function checkPic(picForm){
var location=picForm.pic.value;
if(location==""){
alert("请先选择图片文件");
return false;
}
var point = location.lastIndexOf(".");
var type = location.substr(point);
if(type==".jpg"||type==".gif"||type==".JPG"||type==".GIF"){
img=document.createElement("img");
img.src=location;
if(img.fileSize>102400){
alert("图片尺寸请不要大于100KB");
return false;
}else
return true;
}
else{
alert("只能输入jpg或者gif格式的图片");
return false;
}
return true;
}
function changesrc(){
yourpic.src=picForm.pic.value;
}
</script>
<table width="100%" border="0">
<tr>
<td>
<div align="center"><img border="1" id="yourpic"
onload="javascript:if(this.width>175)this.width=175;if(this.height>150)this.height=150;">
</div>
</td>
</tr>
<form name="picForm" action="#" method="post"
enctype="multipart/form-data" onsubmit="return checkPic(picForm);">
<tr>
<td>
<div align="center"><input type="file" name="file" size="10"
id="pic" onchange="changesrc()"/
></div>
</td>
</tr>
<tr>
<td>
<div align="center"><input type="submit" value="上传照片" /></div>
</td>
</tr>
</table>
分享到:
相关推荐
javascript 实现限制上传文件大小
项目中经常用到需要上传文件、照片等功能,同时需要限制所上传文件的大小。很多插件都会采用后台请求验证,前端Js校验比较少。本篇介绍一个前端JS便捷判断上传文件大小的方法。 这个是比较好的 <html> <...
用JavaScript控制上传文件的大小限制!很不错的!
网上很多关于上传图片大小的控制说明,但是却很少有关于其他格式的上传文件大小的控制说明,今天终于找到了一个,跟大家分享一下,希望对大家有所帮助
js控制上传图片的大小 js控制上传图片的大小 js控制上传图片的大小
上传文件大小的限制和判断javascript
NULL 博文链接:https://yangwenshuai.iteye.com/blog/1182620
代码是从一个论坛找到的,程序简单易懂,现在不用分共享给需要的人
SWFUpload最初是由Vinterwebb.se开发的一个客户端的上传工具. 它结合了FLASH和JavaScript的功能,以提供一种超越了传统的浏览器中标签提供的文件上传功能。
在做上传图片的时候,如果不限制上传图片大小,后果非常的严重。那么我们怎样才可以解决一个棘手的问题呢?有两种方式: 1)后台处理: 也就是AJAX POST提交到后台,把图片上传到服务器上,然后获得该图片大小做处理...
JavaScript 上传文件限制参数案例详解 项目场景: 1,上传文件限制 功能作用: 1,防止前端操作上传异常文件 2,限制符合的规则,优化展示模型 功能实现: 1,获取file实例 2,执行校验规则方法 代码如下:...
需求分析: 在做上传图片的时候,如果不限制上传图片大小,后果非常的严重。那么我们怎样才可以解决一个棘手的问题呢?有两种方式: 1)后台处理: 也就是AJAX POST提交到后台,把图片上传到服务器上,然后获得该图片...
本文实例讲述了JavaScript检测上传文件大小的方法。分享给大家供大家参考。具体如下: 通过JS客户端代码限制用户上传文件的大小,但是客户端的验证只是辅助的,服务器端一定还要再做验证 <!DOCTYPE ...
使用JS可以轻松解决词问题,js在上传图片前判断大小 这个可以用javascript实现,效果…//允许上传图片文件的大小 具体代码如下 代码如下: [removed] var ImgObj=new Image(); //建立一个图像对象 var AllImgExt=”....
点击上传图片,可以拖动图片上传,可以多选,上传完成,点击保存,即可在页面中显示; 显示图片的布局是以弹性盒布局为主,限制上传格式和上传图片大小,适合交作业demo
2、很多网站的图片上传功能都会对图片的大小进行限制,尤其是头像上传,限制5M或者2M以内是非常常见的(但是我用单反拍了个头像,照片超过2M很正常,要对图片进行处理才能上传)。如果可以在前端进行压缩,则理论上...
件上传之前的检测,通常是通过文件名来判断文件类型是否合法,但是要想检测文件的大小很难办到,除非在本地或者使用控件。使用JS可以轻松解决词问题,js在上传图片前判断大小 这个可以用javascript实现,效果