js實(shí)現(xiàn)上傳圖片及時(shí)預(yù)覽
來(lái)源:易賢網(wǎng) 閱讀:872 次 日期:2016-07-02 13:07:11
溫馨提示:易賢網(wǎng)小編為您整理了“js實(shí)現(xiàn)上傳圖片及時(shí)預(yù)覽”,方便廣大網(wǎng)友查閱!

這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)上傳圖片及時(shí)預(yù)覽的相關(guān)資料,具有一定的參考價(jià)值,感興趣的朋友可以參考一下

本文實(shí)例為大家分享了javascript圖片預(yù)覽功能實(shí)現(xiàn)的具體代碼,供大家參考,具體內(nèi)容如下

先為大家分享一段關(guān)于js圖片預(yù)覽的代碼,兼容火狐和谷歌瀏覽器

/* 案例展示圖片預(yù)覽 */

$(function(){

  $("#file0").bind("change",function(){

    clickupLoad();

  });

});

function clickupLoad(){

  var imgObject = document.getElementById('file0');

  var getImageSrc = getFullPath(imgObject); // 本地路徑

  var srcs = window.URL.createObjectURL(imgObject.files[0]);

  var pos = getImageSrc.lastIndexOf(".");

  var lastname = getImageSrc.substring(pos, getImageSrc.length) // 圖片后綴]

  if(srcs!=""){

    $("#yulan2").attr("src",srcs);

  }else{

    alert("請(qǐng)選擇一張圖片");

  }

}

function getFullPath(obj) {  //得到圖片的完整路徑

  if (obj)

  {

    if (window.navigator.userAgent.indexOf("MSIE") >= 1){

      obj.select();

      return document.selection.createRange().text;

      

    }else if(window.navigator.userAgent.indexOf("Firefox") >= 1) {

      if (obj.files) {

        return window.URL.createObjectURL(obj.files[0]);

      }

      return obj.value;

    }

    return obj.value;

  }

}

實(shí)例代碼實(shí)現(xiàn)js上傳圖片及時(shí)預(yù)覽:

<html>

<head>   

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   

<title>圖片上傳本地預(yù)覽</title>   

<style type="text/css">

#preview{width:260px;height:190px;border:1px solid #000;overflow:hidden;}

#imghead {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);}

</style>

<script type="text/javascript">

        //圖片上傳預(yù)覽  IE是用了濾鏡。

    function previewImage(file)

    {

     var MAXWIDTH = 260; 

     var MAXHEIGHT = 180;

     var div = document.getElementById('preview');

     if (file.files && file.files[0])

     {

       div.innerHTML ='<img id=imghead>';

       var img = document.getElementById('imghead');

       img.onload = function(){

        var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);

        img.width = rect.width;

        img.height = rect.height;

//         img.style.marginLeft = rect.left+'px';

        img.style.marginTop = rect.top+'px';

       }

       var reader = new FileReader();

       reader.onload = function(evt){img.src = evt.target.result;}

       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;

      div.innerHTML = '<img id=imghead>';

      var img = document.getElementById('imghead');

      img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;

      var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);

      status =('rect:'+rect.top+','+rect.left+','+rect.width+','+rect.height);

      div.innerHTML = "<div id=divhead style='width:"+rect.width+"px;height:"+rect.height+"px;margin-top:"+rect.top+"px;"+sFilter+src+"\"'></div>";

     }

    }

    function clacImgZoomParam( maxWidth, maxHeight, width, height ){

      var param = {top:0, left:0, width:width, height:height};

      if( width>maxWidth || height>maxHeight )

      {

        rateWidth = width / maxWidth;

        rateHeight = height / maxHeight;

          

        if( rateWidth > rateHeight )

        {

          param.width = maxWidth;

          param.height = Math.round(height / rateWidth);

        }else

        {

          param.width = Math.round(width / rateHeight);

          param.height = maxHeight;

        }

      }

      param.left = Math.round((maxWidth - param.width) / 2);

      param.top = Math.round((maxHeight - param.height) / 2);

      return param;

    }

</script>   

</head>   

<body>

<div id="preview">

  <img id="imghead" width=100 height=100 border=0 src='<%=request.getContextPath()%>/images/defaul.jpg'>

</div>

<input type="file" onchange="previewImage(this)" />   

</body>   

</html>

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家學(xué)習(xí)javascript程序設(shè)計(jì)有所幫助。

更多信息請(qǐng)查看網(wǎng)絡(luò)編程
易賢網(wǎng)手機(jī)網(wǎng)站地址:js實(shí)現(xiàn)上傳圖片及時(shí)預(yù)覽
由于各方面情況的不斷調(diào)整與變化,易賢網(wǎng)提供的所有考試信息和咨詢回復(fù)僅供參考,敬請(qǐng)考生以權(quán)威部門公布的正式信息和咨詢?yōu)闇?zhǔn)!

2025國(guó)考·省考課程試聽(tīng)報(bào)名

  • 報(bào)班類型
  • 姓名
  • 手機(jī)號(hào)
  • 驗(yàn)證碼
關(guān)于我們 | 聯(lián)系我們 | 人才招聘 | 網(wǎng)站聲明 | 網(wǎng)站幫助 | 非正式的簡(jiǎn)要咨詢 | 簡(jiǎn)要咨詢須知 | 新媒體/短視頻平臺(tái) | 手機(jī)站點(diǎn) | 投訴建議
工業(yè)和信息化部備案號(hào):滇ICP備2023014141號(hào)-1 云南省教育廳備案號(hào):云教ICP備0901021 滇公網(wǎng)安備53010202001879號(hào) 人力資源服務(wù)許可證:(云)人服證字(2023)第0102001523號(hào)
云南網(wǎng)警備案專用圖標(biāo)
聯(lián)系電話:0871-65099533/13759567129 獲取招聘考試信息及咨詢關(guān)注公眾號(hào):hfpxwx
咨詢QQ:1093837350(9:00—18:00)版權(quán)所有:易賢網(wǎng)
云南網(wǎng)警報(bào)警專用圖標(biāo)