ASP.NET+easyUI 프레임 워 크 를 기반 으로 이미지 업로드 기능 구현(판단 형식+실시 간 탐색)

ASP.Net+easyUI 프레임 워 크 를 기반 으로 그림 을 업로드 하고 형식 판단+실시 간 탐색 을 실현 합 니 다.구체 적 인 내용 은 다음 과 같 습 니 다.

<div>
      :<input id="idFile" style="width:224px" runat="server" name="pic" onchange="javascript:setImagePreview(this,localImag,preview);" type="file" />
</div>
   　　 :
<div id="localImag">
  <%--  ，    --%>
  <img id="preview" alt="" onclick="over(preview,divImage,imgbig);" src="img/5691.jpg" style="width: 400px; height: 400px;"/> 
</div>

<script>
    //           ,      
    function setImagePreview(obj, localImagId, imgObjPreview) {
      var array = new Array('gif', 'jpeg', 'png', 'jpg', 'bmp'); //         
      if (obj.value == '') {
        $.messager.alert("         !");
        return false;
      }
      else {
        var fileContentType = obj.value.match(/^(.*)(\.)(.{1,8})$/)[3]; //            
        ////     
        var isExists = false;
        //             
        for (var i in array) {
          if (fileContentType.toLowerCase() == array[i].toLowerCase()) {
            //        ，               
            if (obj.files && obj.files[0]) {
              //   ，   img   
              imgObjPreview.style.display = 'block';
              imgObjPreview.style.width = '400px';
              imgObjPreview.style.height = '400px';
              //  7          getAsDataURL()    ，       
              imgObjPreview.src = window.URL.createObjectURL(obj.files[0]);
            }
            else {
              //IE ，     
              obj.select();
              var imgSrc = document.selection.createRange().text;
              //         
              localImagId.style.width = "400px";
              localImagId.style.height = "400px";
              //       ，              
              try {
                localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
                localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
              }
              catch (e) {
                $.messager.alert("           ，     !");
                return false;
              }
              imgObjPreview.style.display = 'none';
              document.selection.empty();
            }
            isExists = true;
            return true;
          }
        }
        if (isExists == false) {
          $.messager.alert("         !");
          return false;
        }
        return false;
      }
    }

    //     
    function over(imgid, obj, imgbig) {
      //          4 3    400 300 
      maxwidth = 400;
      maxheight = 300;

      //   
      obj.style.display = "";
      imgbig.src = imgid.src;

      //1、       ，      ，             ，      2、3 
      //2、            ，        
      //3、            ，        

      if (img.width > maxwidth && img.height > maxheight) {
        pare = (img.width - maxwidth) - (img.height - maxheight);
        if (pare >= 0)
          img.width = maxwidth;
        else
          img.height = maxheight;
      }
      else if (img.width > maxwidth && img.height <= maxheight) {
        img.width = maxwidth;
      }
      else if (img.width <= maxwidth && img.height > maxheight) {
        img.height = maxheight;
      }
    }
</script> 

인터페이스 효과 도:

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.