JS验证上传照片大小类型并显示预览

JS部分：

//验证照片
   function addIMG(file){
       var filePath=file.value;//照片路径
       var fileSize=file.files[0].size;//照片尺寸大小
       var imgsize=fileSize/1024;
       var fileType=filePath.substring(filePath.indexOf("."));//照片类型
       if(filePath){
          //验证图片大小
          if(imgsize > 200 ){
              alert("照片大小不可以超过200K！");
              file.value = "";
              return false;
          }
          if(fileType != ".JPG" && fileType != ".jpg"){
              alert("照片类型必须为JPG/jpg格式的！");
              file.value = "";
              return false;
          }
   //读取照片数据,验证照片尺寸
   if (file.files && file.files[0]){
var img = document.getElementById('imghead');
var filePic = file.files[0];
   var reader = new FileReader();
   reader.onload = function (e) {
   var data = e.target.result;
   //加载图片获取照片真实宽度和高度
   var image = new Image();
   image.onload=function(){
   var width = image.width;
   var height = image.height;
   if (width == 295 | height == 413){
       img.src=window.URL.createObjectURL(file.files[0]);
   }else {
   alert("照片尺寸应为：295*413");
   file.value = "";
   return false;
   }
   };
   image.src= data;
   };
reader.readAsDataURL(file.files[0]);
}else{//兼容IE
var sFilter='filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';
file.select();
var src = document.selection.createRange().text;
var img = document.getElementById('imghead');
img.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
document.selection.empty();
var image = new Image();
image.src=src;
var height = image.height;
var width = image.width;
if (width == 295 | height == 413){
}else {
alert("照片尺寸应为：295*413！");
file.value = "";
return false;
}
}
   }else{
       alert("照片不可以为空！");
   return false;
   }
   }

BODY部分：

<table width="100%" height="120">
                                   <tr>
                                       <td width="17%">
                                       <c:if test="${stu.imgPath eq null}">
                                           <img src="images/tx.jpg" id="imghead" width="127" height="167" onclick="addFile()"/><br/>
                                       </c:if>
                                       <c:if test="${stu.imgPath ne null}">
                                           <img src="${pageContext.request.contextPath}${stu.imgPath}" id="imghead" onclick="addFile()" width="127" height="167"/><br/>
                                       </c:if>
                                       <input type="hidden" id="files" value="${stu.imgPath}"/>
                                       <input type="file" id="file" name="file" value="123" onchange="addIMG(this)" UNSELECTABLE="on"/>
                                       </td>
                                       <td><div style="position: relative;left: -50px;top:0px;width: 310px;height: 120px;">
                                           上传照片注意事项：<br/>
                                           1.照片必须为1寸照片(像素为295*413);<br/>
                                           2.照片大小必须在200K以内;<br/>
                                           3.照片格式必须为JPG/jpg;<br/>
                                           4.请用IE8以上浏览器上传照片。
                                           </div>
                                       </td>
                                   </tr>
                               </table>

JS验证上传照片大小类型并显示预览

猜你喜欢