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


Posted in Javascript onAugust 29, 2018

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

预览效果见下图:

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

HTML代码如下:

<div class="content" style="margin-top:100px;height:200px;">
  <div id="div4bm" style="float:left;">
  <!--input[button] 触发 file click事件-->
  <input type="button" value="选择文件" id="mybutton" class="mybtn" onclick="Id('file').click();" />
  <!--file 隐藏起来 触发onchange事件-->
  <input type="file" name="file" accept="image/png,image/jpg,image/jpeg" id="file" onchange="changeToop();" style="display:none;" />
  </div>
  <!--图片展示区域-->
  <div style="float:left;">
    <!--设置默认图片-->
    <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==''){
    //设置默认图片
  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.3water.com/code/WebCodeRun测试运行效果。

也可使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/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>3water.com js input选择图片本地预览</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] 触发 file click事件-->
  <input type="button" value="选择文件" id="mybutton" class="mybtn" onclick="Id('file').click();" />
  <!--file 隐藏起来 触发onchange事件-->
  <input type="file" name="file" accept="image/png,image/jpg,image/jpeg" id="file" onchange="changeToop();" style="display:none;" />
  </div>
  <!--图片展示区域-->
  <div style="float:left;">
    <!--设置默认图片-->
    <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==''){
    //设置默认图片
  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);
}
</script>
</body>
</html>

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

Javascript 相关文章推荐
javascript中获取选中对象的类型
Apr 02 Javascript
js刷新框架子页面的七种方法代码
Nov 20 Javascript
解析Javascript中难以理解的11个问题
Dec 09 Javascript
用原生js做个简单的滑动效果的回到顶部
Oct 15 Javascript
JS控制弹出悬浮窗口(一览画面)的实例代码
May 30 Javascript
jQuery中fadein与fadeout方法用法示例
Sep 16 Javascript
关于jQuery EasyUI 中刷新Tab选项卡后一个页面变形的解决方法
Mar 02 Javascript
JavaScript+Html5实现按钮复制文字到剪切板功能(手机网页兼容)
Mar 30 Javascript
简单实现js鼠标跟随效果
Aug 02 Javascript
BootStrap Fileinput上传插件使用实例代码
Jul 28 Javascript
小程序tab页无法传递参数的方法
Aug 03 Javascript
vue keep-alive的简单总结
Jan 25 Vue.js
简述vue状态管理模式之vuex
Aug 29 #Javascript
jQuery实现的简单手风琴效果示例
Aug 29 #jQuery
angularjs实现对表单输入改变的监控(ng-change和watch两种方式)
Aug 29 #Javascript
jQuery实现的淡入淡出图片轮播效果示例
Aug 29 #jQuery
JS实现数组的增删改查操作示例
Aug 29 #Javascript
vue-video-player 通过自定义按钮组件实现全屏切换效果【推荐】
Aug 29 #Javascript
vue-cli3.0使用及部分配置详解
Aug 29 #Javascript
You might like
第十节--抽象方法和抽象类
2006/11/16 PHP
帝国CMS留言板回复后发送EMAIL通知客户
2015/07/06 PHP
php中json_encode不兼容JSON_UNESCAPED_UNICODE的解决方案
2016/05/31 PHP
如何离线执行php任务
2017/02/21 PHP
php+mysql+ajax实现单表多字段多关键词查询的方法
2017/04/15 PHP
javascript 拖放效果实现代码
2010/01/22 Javascript
jQuery数组处理方法汇总
2011/06/20 Javascript
js实现动态添加、删除行、onkeyup表格求和示例
2013/08/18 Javascript
IE8中使用javascript动态加载CSS的解决方法
2014/06/17 Javascript
浅析jQuery Ajax请求参数和返回数据的处理
2016/02/24 Javascript
jquery.zclip轻量级复制失效问题
2017/01/08 Javascript
Angular2实现组件交互的方法分析
2017/12/19 Javascript
详解express + mock让前后台并行开发
2018/06/06 Javascript
使用vue2.6实现抖音【时间轮盘】屏保效果附源码
2019/04/24 Javascript
JS如何在不同平台实现多语言方式
2020/07/16 Javascript
typescript配置alias的详细步骤
2020/08/12 Javascript
vue2和vue3的v-if与v-for优先级对比学习
2020/10/10 Javascript
[52:05]EG vs OG 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
Python实现建立SSH连接的方法
2015/06/03 Python
详解python中xlrd包的安装与处理Excel表格
2016/12/16 Python
Python基于正则表达式实现文件内容替换的方法
2017/08/30 Python
Python cookbook(数据结构与算法)在字典中将键映射到多个值上的方法
2018/02/18 Python
python正则表达式之对号入座篇
2018/07/24 Python
便捷提取python导入包的属性方法
2018/10/15 Python
Python基本数据结构与用法详解【列表、元组、集合、字典】
2019/03/23 Python
Django框架模板语言实例小结【变量,标签,过滤器,继承,html转义】
2019/05/23 Python
Pytorch中Tensor与各种图像格式的相互转化详解
2019/12/26 Python
python实现替换word中的关键文字(使用通配符)
2020/02/13 Python
django rest framework serializer返回时间自动格式化方法
2020/03/31 Python
PyCharm+PyQt5+QtDesigner配置详解
2020/08/12 Python
CSS中垂直居中的简单实现方法
2015/07/06 HTML / CSS
css3类选择器之结合元素选择器和多类选择器用法
2017/03/09 HTML / CSS
华为c/c++笔试题
2016/01/25 面试题
大四学生找工作的自荐信
2014/03/27 职场文书
青春雷锋观后感
2015/06/10 职场文书
小学三年级作文之写景
2019/11/05 职场文书