JS判断图片的属性

来源:互联网 发布:多益网络策划类笔试 编辑:程序博客网 时间:2024/06/05 01:14

 <body>
  <jsp:include flush="false" page="../include/top.jsp" />
  <ul id="submenu">
   <li>
    <a href="stencilManage.action">模板管理</a>
   </li>
   <li>
    <a href="stencilAdd.jsp" class="current">新建模板</a>
   </li>
  </ul>
  <p>
   添加模板
  </p>
  <hr />
  <ww:if test="hasFieldErrors()">
   <span class="errorMessage"> <b>提示:</b><br /> <ww:iterator value="fieldErrors">
     <li>
      <ww:property value="value[0]" />
     </li>
    </ww:iterator> </span>
  </ww:if>
  <form action="stencilAdd.action" method="post" enctype="multipart/form-data" name="form1" id="form1">
   <label>
    模板名称
    <input type="text" name="model.name" id="name"/>
   </label>
   <p>
    <label>
     模板文件
     <input type="file" name="file" id="inp" />
    </label>
   </p>
   <p>
    <label>
     选择区域
     <select name="model.area" id="area">
      <option value="A">
       A
      </option>
      <option value="B">
       B
      </option>
      <option value="C">
       C
      </option>
      <option value="D">
       D
      </option>
     </select>
    </label>
   </p>
   <p>
    <label>
     模板描述
     <textarea name="model.description"></textarea>
    </label>
   </p>
   <p>
    <input type="button" name="Submit" value="提交" onclick="showtype()" />
   </p>
  </form>
  <p>
   &nbsp;

  </p>

  <script language="javascript">
//在JS状态下读取(WEB支持的)图像格式的大小及尺寸
//农夫 cnsdl
var img=null;
var inp= document.getElementById("inp");
var flat = 0;// 透过改变flat的值来控制是否提交
function showtype()
{

if (!VerifyNullForAlert("inp"," [模板]")){
 return false;
}

   if(img)img.removeNode(true);
   img=document.createElement("img");
   img.style.position="absolute";
   img.style.visibility="hidden";
   img.attachEvent("onreadystatechange",orsc);
   //img.onreadystatechange = orsc;
   img.attachEvent("onerror",oe);
   //img.onerror = oe;
   document.body.insertAdjacentElement("beforeend",img);
  
   img.src=inp.value;
   if (flat==1){
    return false;
   }else{
   document.getElementById("form1").submit();
   }
}

function oe()
{
flat=1;
alert("不是图片文件/n/n只能是:JPG|JPEG|GIF格式的文件");
}

function orsc()
{
var urll=inp.value;
var ftype=urll.substring(urll.lastIndexOf(".")+1,urll.length)
ftype=ftype.toUpperCase();
if(img.readyState!="complete")return false;

if (document.getElementById("area").value=="A"){
if (img.offsetWidth!==800 ||img.offsetHeight!==600){
 flat=1;
 alert("尺寸:宽"+img.offsetWidth+"   X   高"+img.offsetHeight+"/n/n格式:"+ftype+" 图像/n/n大小:"+Math.round(img.fileSize*100 / 1024)/100+" KB/n/n需要输入宽800 X 高600");
}}else if (document.getElementById("area").value=="B" ){
if (img.offsetWidth!==224 ||img.offsetHeight!==708){
 flat=1;
 alert("尺寸:宽"+img.offsetWidth+"   X   高"+img.offsetHeight+"/n/n格式:"+ftype+" 图像/n/n大小:"+Math.round(img.fileSize*100 / 1024)/100+" KB/n/n需要输入宽224 X 高708");
}}else if (document.getElementById("area").value=="C"){
if (img.offsetWidth!==800 ||img.offsetHeight!==108){
 flat=1;
 alert("尺寸:宽"+img.offsetWidth+"   X   高"+img.offsetHeight+"/n/n格式:"+ftype+" 图像/n/n大小:"+Math.round(img.fileSize*100 / 1024)/100+" KB/n/n需要输入宽800 X 高108");
}}else if(document.getElementById("area").value=="D"){
if (img.offsetWidth!==1024 ||img.offsetHeight!==60){
 flat=1;
 alert("尺寸:宽"+img.offsetWidth+"   X   高"+img.offsetHeight+"/n/n格式:"+ftype+" 图像/n/n大小:"+Math.round(img.fileSize*100 / 1024)/100+" KB/n/n需要输入宽1024 X 高60");
}}
}
</script>
 </body>

原创粉丝点击