>>分享Web前端开发技术,并对孙卫琴的《精通Vue.js:Web前端开发技术详解》提供技术支持 书籍支持  卫琴直播  品书摘要  在线测试  资源下载  联系我们
发表一个新主题 开启一个新投票 回复文章 您是本文章第 21146 个阅读者 刷新本主题
 * 贴子主题:  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开发-->使用过滤器
  JSP与Hibernate开发-->立即检索和延迟检索策略
  Java网络编程-->Socket用法详解
  精通Spring-->Vue Router路由管理器
  Vue3开发-->Vue Router路由管理器
  Promise对象的then()和catch()方法
  JavaScript ES2015模块化操作
  BootStrap, React, Vue的比较
  Vue+Vant中van-list请求数据(数据请求调用公用方法)
  vue-min-picker普通选择器,日期选择器,省市区选择器,适用...
  vue实现Word或Excel文档导出的功能,转换文件名乱码或者json...
  JS对树形数据的遍历和过滤,
  一看就懂得移动端rem布局、rem如何换算
  JavaScript的HTML DOM Input Search 对象
  CSS 属性选择器
  CSS 盒子模型
  JavaScript Array(数组)对象
  JavaScript 函数 的定义和使用
  JavaScript 语法大全
  应该掌握的几个HTML标记语言(个人总结)
  更多...
 IPIP: 已设置保密
楼主      
1页 0条记录 当前第1
发表一个新主题 开启一个新投票 回复文章


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