扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
本文实例讲述了JS实现的input选择图片本地预览功能。分享给大家供大家参考,具体如下:
成都创新互联IDC提供业务:四川移动机房托管,成都服务器租用,四川移动机房托管,重庆服务器租用等四川省内主机托管与主机租用业务;数据中心含:双线机房,BGP机房,电信机房,移动机房,联通机房。
预览效果见下图:
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选择图片本地预览 更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript图片操作技巧大全》、《JavaScript图形绘制技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
名称栏目:JS实现的input选择图片本地预览功能示例
网页路径:http://kswjz.com/article/jisoec.html扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流