html 选择图片预览,JS实现的input选择图片本地预览功能示例

本文实例讲述了JS实现的input选择图片本地预览功能。分享给大家供大家参考，具体如下：

预览效果见下图：

HTML代码如下：

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==''){

//设置默认图片

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;

}

//读取图片后预览

function preImg(fileId,imgId) {

var imgPre =Id(imgId);

imgPre.src = getFileUrl(fileId);

}

上述代码可使用在线HTML/CSS/JavaScript前端代码调试运行工具：http://tools.jb51.net/code/WebCodeRun测试运行效果。

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

www.jb51.net js input选择图片本地预览

.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;

}

//定义id选择器

function Id(id){

return document.getElementById(id);

}

function changeToop(){

var file = Id("file");

if(file.value==''){

//设置默认图片

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;

}

//读取图片后预览

function preImg(fileId,imgId) {

var imgPre =Id(imgId);

imgPre.src = getFileUrl(fileId);

}

希望本文所述对大家JavaScript程序设计有所帮助。