>>分享Web前端开发技术,并对孙卫琴的《精通Vue.js:Web前端开发技术详解》提供技术支持 书籍支持  卫琴直播  品书摘要  在线测试  资源下载  联系我们
发表一个新主题 开启一个新投票 回复文章 您是本文章第 23111 个阅读者 刷新本主题
 * 贴子主题:  js判断上传图片大小及尺寸 回复文章 点赞(0)  收藏  
作者:sunshine    发表时间:2021-02-04 03:05:13     消息  查看  搜索  好友  邮件  复制  引用

  以下直接粘贴到记事本中,给后缀改为html即可运行

============================================================
<input name="txtImg" type="file" id="txtImg"     />
<input name="btnUploadImg" type="button" id="btnUploadImg" value="上传"  />
<span class="redcolor">(最佳图片尺寸:宽度不超过600像素,高度不超过600像素)</span>

<script language="javascript">
var AllowImgFileSize=512;                //允许上传图片文件的大小 0为无限制 单位:KB  
var AllowImgWidth=600;                        //允许上传的图片的宽度 0为无限制 单位:px(像素)  
var AllowImgHeight=600;                        //允许上传的图片的高度 0为无限制 单位:px(像素)

function checkImg(){
   var txtImg=document.getElementById("txtImg");
   if (txtImg.value==""){
     alert("请点击浏览按钮,选择您要上传的JPG或GIF文件!");
     txtImg.focus();
     return false;
   }
  
   var txtImg_url=txtImg.value.toLowerCase();
   var txtImg_ext=txtImg_url.substring(txtImg_url.length-3,txtImg_url.length);
   if (txtImg_ext!="jpg" && txtImg_ext!="gif" ){
    alert("请选择JPG或GIF格式的文件!");
    txtImg.select()
    document.execCommand("Delete");
    txtImg.focus();
    return false;
  }
  var ErrMsgErrMsg = "";//错误信息
  var img=new Image();
  img.src=txtImg.value;
  
  if(img.width > AllowImgWidth){
    ErrMsgErrMsg="
     图片宽度超过限制 请上传宽度小于"+AllowImgWidth+"px的文件,当前图片宽度为"+img.width+"px";
    alert(ErrMsgErrMsg);
    return false;
  }

   if(img.height > AllowImgWidth){
     ErrMsgErrMsg="
      图片高度超过限制 请上传高度小于"+AllowImgHeight+"px的文件,当前图片高度为"+img.height+"px";
     alert(ErrMsgErrMsg);
     return false;
  }
  
  var size = formatNum(img.fileSize / 1024,2);
  if(size > AllowImgFileSize)  {
    ErrMsgErrMsg = "
      图片文件大小超过限制 请上传小于"+AllowImgFileSize+"KB的文件,当前文件大小为"+size+"KB";
    alert(ErrMsgErrMsg);
    return false;
}

alert('ok!');
return true;
}

function formatNum(amt,pre) {
  pre = pre > 0 && pre <= 20 ? pre : 2;

  amt = parseFloat((amt + "").replace(/[^\d\.-]/g, "")).toFixed(pre) + "";
  var left = amt.split(".")[0].split("").reverse();

  var right = amt.split(".")[1];

  var t = "";
  for(i = 0; i < left.length; i ++ ) {
   t += left[i] + ((i + 1) % 3 == 0 && (i + 1) != left.length ? "" : "");
  }

  return t.split("").reverse().join("") + "." + right;

}

</script>

----------------------------
原文链接:https://blog.51cto.com/jrunner/369478

程序猿的技术大观园:www.javathinker.net



[这个贴子最后由 flybird 在 2021-02-14 18:36:53 重新编辑]
  Java面向对象编程-->类的生命周期
  JavaWeb开发-->Java语言中的修饰符
  JSP与Hibernate开发-->Servlet技术详解(Ⅲ)
  Java网络编程-->JSP中使用JavaBean(Ⅰ)
  精通Spring-->数据库事务的概念和声明
  Vue3开发-->持久化层的映射类型
  webpack常用插件
  vue30道面试题
  勇闯28个关卡学会HTML与HTML5基础
  vue3 composition API的用法
  Axios拦截器的用法
  Vue路由传递参数详细说明
  加快 Vue 项目的开发速度
  JavaScript中数组的常用方法(含ES6)
  jQuery 选择器
  HTML DOM Script 对象
  Javascript DOM封装方法汇总
  CSS3字体
  CSS 伪类
  HTML5 语义元素
  jQuery Mobile 事件
  更多...
 IPIP: 已设置保密
楼主      
1页 0条记录 当前第1
发表一个新主题 开启一个新投票 回复文章


中文版权所有: JavaThinker技术网站 Copyright 2016-2026 沪ICP备16029593号-2
荟萃Java程序员智慧的结晶,分享交流Java前沿技术。  联系我们
如有技术文章涉及侵权,请与本站管理员联系。