快捷導(dǎo)航

JS實現(xiàn)的input選擇圖片本地預(yù)覽功能示例

更新時間：2018年08月29日 15:04:33 作者：鄒大叔

這篇文章主要介紹了JS實現(xiàn)的input選擇圖片本地預(yù)覽功能,涉及javascript針對頁面元素屬性動態(tài)操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下

本文實例講述了JS實現(xiàn)的input選擇圖片本地預(yù)覽功能。分享給大家供大家參考，具體如下：

預(yù)覽效果見下圖：

HTML代碼如下：

<div class="content" style="margin-top:100px;height:200px;">
  <div id="div4bm" style="float:left;">
  <!--input[button] 觸發(fā) file click事件-->
  <input type="button" value="選擇文件" id="mybutton" class="mybtn" onclick="Id('file').click();" />
  <!--file 隱藏起來 觸發(fā)onchange事件-->
  <input type="file" name="file" accept="image/png,image/jpg,image/jpeg" id="file" onchange="changeToop();" style="display:none;" />
  </div>
  <!--圖片展示區(qū)域-->
  <div style="float:left;">
    <!--設(shè)置默認圖片-->
    <img id="myimg" src="http://sandbox.runjs.cn/uploads/rs/72/huvtowwn/zanwu.png"/>
</div>

CSS代碼如下：

.mybtn{
  width:100px;
  height:30px;
  display:inline-block;
  background-color:rgb(91,183,91);
  border:1px solid rgb(91,183,91);
  border-radius:3px;
  color:white;
  font-size:14px;
  font-family:微軟雅黑;
  cursor:pointer;
  text-align:center;
  vertical-align: center;
  box-shadow:0px 0px 1px 1px rgb(91,160,91);
}
.mybtn:hover{
  background-color:rgb(91,160,91);
  border-color:rgb(91,160,91);
  color:white;
  text-decoration:none;
}
.myinp{
  width:100px;
  height:30px;
  display:inline-block;
  border:1px solid rgb(209,232,250);
  border-radius:2px;
}
#div4bm{
  padding-top:15px;
  margin-right:15px;
  }
  #mybutton{
  margin-left:100px;
}
#myimg{
  width:164px;
  height:164px;
}

JS代碼如下：

//定義id選擇器
function Id(id){
return document.getElementById(id);
}
function changeToop(){
  var file = Id("file");
  if(file.value==''){
    //設(shè)置默認圖片
  Id("myimg").src='http://sandbox.runjs.cn/uploads/rs/72/huvtowwn/zanwu.png';
  }else{
    preImg("file","myimg");
  }
}
//獲取input[file]圖片的url Important
function getFileUrl(fileId) {
  var url;
  var file = Id(fileId);
  var agent = navigator.userAgent;
  if (agent.indexOf("MSIE")>=1) {
  url = file.value;
  } else if(agent.indexOf("Firefox")>0) {
  url = window.URL.createObjectURL(file.files.item(0));
  } else if(agent.indexOf("Chrome")>0) {
  url = window.URL.createObjectURL(file.files.item(0));
  }
  return url;
}
//讀取圖片后預(yù)覽
function preImg(fileId,imgId) {
var imgPre =Id(imgId);
imgPre.src = getFileUrl(fileId);
}

上述代碼可使用在線HTML/CSS/JavaScript前端代碼調(diào)試運行工具：http://tools.jb51.net/code/WebCodeRun測試運行效果。

也可使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.jb51.net/code/HtmlJsRun運行如下完整代碼得到上面圖示效果。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>www.dbjr.com.cn js input選擇圖片本地預(yù)覽</title>
<style>
.mybtn{
  width:100px;
  height:30px;
  display:inline-block;
  background-color:rgb(91,183,91);
  border:1px solid rgb(91,183,91);
  border-radius:3px;
  color:white;
  font-size:14px;
  font-family:微軟雅黑;
  cursor:pointer;
  text-align:center;
  vertical-align: center;
  box-shadow:0px 0px 1px 1px rgb(91,160,91);
}
.mybtn:hover{
  background-color:rgb(91,160,91);
  border-color:rgb(91,160,91);
  color:white;
  text-decoration:none;
}
.myinp{
  width:100px;
  height:30px;
  display:inline-block;
  border:1px solid rgb(209,232,250);
  border-radius:2px;
}
#div4bm{
  padding-top:15px;
  margin-right:15px;
  }
  #mybutton{
  margin-left:100px;
}
#myimg{
  width:164px;
  height:164px;
}
</style>
</head>
<body>
<div class="content" style="margin-top:100px;height:200px;">
  <div id="div4bm" style="float:left;">
  <!--input[button] 觸發(fā) file click事件-->
  <input type="button" value="選擇文件" id="mybutton" class="mybtn" onclick="Id('file').click();" />
  <!--file 隱藏起來 觸發(fā)onchange事件-->
  <input type="file" name="file" accept="image/png,image/jpg,image/jpeg" id="file" onchange="changeToop();" style="display:none;" />
  </div>
  <!--圖片展示區(qū)域-->
  <div style="float:left;">
    <!--設(shè)置默認圖片-->
    <img id="myimg" src="http://sandbox.runjs.cn/uploads/rs/72/huvtowwn/zanwu.png"/>
</div>
<script>
//定義id選擇器
function Id(id){
return document.getElementById(id);
}
function changeToop(){
  var file = Id("file");
  if(file.value==''){
    //設(shè)置默認圖片
  Id("myimg").src='http://sandbox.runjs.cn/uploads/rs/72/huvtowwn/zanwu.png';
  }else{
    preImg("file","myimg");
  }
}
//獲取input[file]圖片的url Important
function getFileUrl(fileId) {
  var url;
  var file = Id(fileId);
  var agent = navigator.userAgent;
  if (agent.indexOf("MSIE")>=1) {
  url = file.value;
  } else if(agent.indexOf("Firefox")>0) {
  url = window.URL.createObjectURL(file.files.item(0));
  } else if(agent.indexOf("Chrome")>0) {
  url = window.URL.createObjectURL(file.files.item(0));
  }
  return url;
}
//讀取圖片后預(yù)覽
function preImg(fileId,imgId) {
var imgPre =Id(imgId);
imgPre.src = getFileUrl(fileId);
}
</script>
</body>
</html>

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript圖片操作技巧大全》、《JavaScript圖形繪制技巧總結(jié)》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運算用法總結(jié)》

希望本文所述對大家JavaScript程序設(shè)計有所幫助。

您可能感興趣的文章: