主頁 > 知識(shí)庫 > 基于ASP.NET+easyUI框架實(shí)現(xiàn)圖片上傳功能(判斷格式+即時(shí)瀏覽 )

基于ASP.NET+easyUI框架實(shí)現(xiàn)圖片上傳功能(判斷格式+即時(shí)瀏覽 )

熱門標(biāo)簽:外呼電話機(jī)器人成本 百應(yīng)電話機(jī)器人外呼系統(tǒng) 地圖標(biāo)注軟件免費(fèi)下載 400電話辦理怎么樣 西寧呼叫中心外呼系統(tǒng)線路商 網(wǎng)絡(luò)電話外呼系統(tǒng)上海 蘇州如何辦理400電話 聯(lián)通官網(wǎng)400電話辦理 臨沂智能電話機(jī)器人加盟

基于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'); //可以上傳的文件類型
      if (obj.value == '') {
        $.messager.alert("讓選擇要上傳的圖片!");
        return false;
      }
      else {
        var fileContentType = obj.value.match(/^(.*)(\.)(.{1,8})$/)[3]; //這個(gè)文件類型正則很有用 
        ////布爾型變量
        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";
              //圖片異常的捕捉,防止用戶修改后綴來偽造圖片 
              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("上傳圖片類型不正確!");
          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、寬和高都超過了,看誰超過的多,誰超的多就將誰設(shè)置為最大值,其余策略按照2、3 
      //2、如果寬超過了并且高沒有超,設(shè)置寬為最大值 
      //3、如果寬沒超過并且高超過了,設(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í)有所幫助,也希望大家多多支持腳本之家。

您可能感興趣的文章:
  • asp.net(c#)判斷遠(yuǎn)程圖片是否存在
  • ASP.NET FileUpload 上傳圖片實(shí)例
  • asp.net MVC實(shí)現(xiàn)無組件上傳圖片實(shí)例介紹
  • asp.net圖片上傳實(shí)例
  • ASP.Net 上傳圖片并生成高清晰縮略圖
  • ASP.NET(C#)實(shí)現(xiàn)一次性動(dòng)態(tài)上傳多張圖片的代碼(多個(gè)文件)
  • ASp.net下fckeditor配置圖片上傳最簡(jiǎn)單的方法
  • asp.net上傳圖片保存到數(shù)據(jù)庫的代碼
  • Asp.net圖片上傳實(shí)現(xiàn)預(yù)覽效果的簡(jiǎn)單代碼
  • ASP.net WebAPI 上傳圖片實(shí)例
  • asp.net UpdatePanel實(shí)現(xiàn)無刷新上傳圖片
  • asp.net圖片上傳生成縮略圖的注意事項(xiàng)
  • asp.net實(shí)現(xiàn)上傳圖片時(shí)判斷圖片的模式GRB或CMYK的方法

標(biāo)簽:臨夏 中衛(wèi) 海西 甘肅 清遠(yuǎn) 聊城 慶陽

巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《基于ASP.NET+easyUI框架實(shí)現(xiàn)圖片上傳功能(判斷格式+即時(shí)瀏覽 )》,本文關(guān)鍵詞  基于,ASP.NET+easyUI,框架,實(shí)現(xiàn),;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題,煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們,我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《基于ASP.NET+easyUI框架實(shí)現(xiàn)圖片上傳功能(判斷格式+即時(shí)瀏覽 )》相關(guān)的同類信息!
  • 本頁收集關(guān)于基于ASP.NET+easyUI框架實(shí)現(xiàn)圖片上傳功能(判斷格式+即時(shí)瀏覽 )的相關(guān)信息資訊供網(wǎng)民參考!
  • 推薦文章