這篇文章主要介紹了基于ASP.NET+easyUI框架實(shí)現(xiàn)圖片上傳功能的相關(guān)資料,重點(diǎn)在于如何判斷格式，實(shí)現(xiàn)即時(shí)瀏覽，需要的朋友可以參考下

基于ASP.Net +easyUI框架上傳圖片，判斷格式+實(shí)現(xiàn)即時(shí)瀏覽，具體內(nèi)容如下:

<div>

  選擇圖片:<input id="idFile" style="width:224px" runat="server" name="pic" onchange="javascript:setImagePreview(this,localImag,preview);" type="file" />

</div>

  預(yù)　　覽:

<div id="localImag">

  <%--預(yù)覽，默認(rèn)圖片--%>

  <img id="preview" alt="" onclick="over(preview,divImage,imgbig);" src="img/5691.jpg" style="width: 400px; height: 400px;"/> 

</div>

--------------------------------------------------

<script>

    //檢查圖片的格式是否正確,同時(shí)實(shí)現(xiàn)預(yù)覽

    function setImagePreview(obj, localImagId, imgObjPreview) {

      var array = new Array('gif', 'jpeg', 'png', 'jpg', 'bmp'); //可以上傳的文件類(lèi)型

      if (obj.value == '') {

        $.messager.alert("讓選擇要上傳的圖片!");

        return false;

      }

      else {

        var fileContentType = obj.value.match(/^(.*)(\.)(.{1,8})$/)[3]; //這個(gè)文件類(lèi)型正則很有用 

        ////布爾型變量

        var isExists = false;

        //循環(huán)判斷圖片的格式是否正確

        for (var i in array) {

          if (fileContentType.toLowerCase() == array[i].toLowerCase()) {

            //圖片格式正確之后，根據(jù)瀏覽器的不同設(shè)置圖片的大小

            if (obj.files && obj.files[0]) {

              //火狐下，直接設(shè)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;

              //必須設(shè)置初始大小 

              localImagId.style.width = "400px";

              localImagId.style.height = "400px";

              //圖片異常的捕捉，防止用戶(hù)修改后綴來(lái)偽造圖片 

              try {

                localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";

                localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;

              }

              catch (e) {

                $.messager.alert("您上傳的圖片格式不正確，請(qǐng)重新選擇!");

                return false;

              }

              imgObjPreview.style.display = 'none';

              document.selection.empty();

            }

            isExists = true;

            return true;

          }

        }

        if (isExists == false) {

          $.messager.alert("上傳圖片類(lèi)型不正確!");

          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、寬和高都超過(guò)了，看誰(shuí)超過(guò)的多，誰(shuí)超的多就將誰(shuí)設(shè)置為最大值，其余策略按照2、3 

      //2、如果寬超過(guò)了并且高沒(méi)有超，設(shè)置寬為最大值 

      //3、如果寬沒(méi)超過(guò)并且高超過(guò)了，設(shè)置高為最大值 

      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> 

界面效果圖：

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助