当前位置:首页 > 日记 > 正文

简单实现JS上传预览功能

简单实现JS上传预览功能

js实现上传图片预览功能思路是获取上传图片本地路径,再加载到页面中实现上传预览

HTML代码

<div class="upload">    <input type="button" class="btn" onclick="browerfile.click()" value="上传">    <input type="file" id="browerfile" style="display: none;" class="test">    <div class="img_center">      <img src="" class="img1-img">    </div>  </div>

实现功能的js代码

//获取图片路劲的方法,兼容多种浏览器,通过createObjectURL实现function getObjectURL(file){  var url = null;  if(window.createObjectURL != undefined){    url = window.createObjectURL(file);//basic  }else if(window.URL != undefined){    url = window.URL.createObjectURL(file);  }else if(window.webkitURL != undefined){    url = window.webkitURL.createObjectURL(file);  }  return url;}//实现功能代码$(function(){  $("#browerfile").change(function(){    var path = browerfile.value;    var objUrl = getObjectURL(this.files[0]);    if(objUrl){      $('.img1-img').attr("src",objUrl);    }  })})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

相关文章

JavaScript实现弹出广告功能

JavaScript实现弹出广告功能

弹出,功能,广告,电脑软件,JavaScript,废话不多说了,直接给大家贴代码了,具体代码如下所示:<span style="white-space:pre"> </span>var i=0;//记录次数 var timer;//定时器id //设置弹出广告 onload=function(){ //间隔四秒展示一次…

bootstrap插件treeview实现全选父

bootstrap插件treeview实现全选父

父节点,插件,子节点,全选,功能,项目需要实现权限管理,使用前端框架bootstrap,所以就直接选用了bootstrap的treeview扩展插件。先上图:选中父节点时,父节点下所有子节点也都全部选中,看代码1、HTML代码<h2>TreeView Checkable</h2><div id="tree…

使用jquery给新生的th绑定hover事

使用jquery给新生的th绑定hover事

事件,绑定,实例,新生,电脑软件,这是昨天在做一个动态的table时遇到的一个小问题,table的th需要让鼠标在移入和移出时显示颜色变化,之前th是固定写死的,直接可以用jquery的hover()方法来实现。现在th需要用js/ajax来动态生成加载到页面,用hover(…

angularjs+bootstrap菜单的使用示

angularjs+bootstrap菜单的使用示

示例代码,菜单,电脑软件,angularjs,bootstrap,需求背景:使用yo angular生成的项目默认主页是这样的:body部分涉及具体的业务内容,后续研究。这里主要研究菜单项、页眉的处理。页脚处理:自动生成的项目中,菜单和页脚设置都是在index.html文件中实…

react.js 获取真实的DOM节点实例 |

react.js 获取真实的DOM节点实例 |

节点,必看,实例,真实,电脑软件,为了获取真实的dom节点,文本输入框必须有一个 ref 属性,然后 this.refs.[refName] 就会返回这个真实的 DOM 节点。var MyComponent = React.createClass({ handleClick: function() { this.refs.myTextInput.f…

在Word2007公式中如何添加大型运算

在Word2007公式中如何添加大型运算

运算符,公式,电脑软件,  借助Word2007提供的插入公式结构功能,用户可以在Word2001文档中添加求和、乘积和副积、并集和交集等大型运算符。以下是小编为您带来的关于在Word2007公式中添加大型运算符,希望对您有所帮助。在Word2007公式中添加…

Ajax异步获取html数据中包含js方法

Ajax异步获取html数据中包含js方法

方法,数据,无效,异步,解决方法,页面上使用js写了一个获取后台数据的方法function data() { var tab = $("#dic") $.ajax({ url: '../demo.ashx?method=GetList', data: {}, dataType: 'json', type: 'pos…

excel2010 打印预览不显示的解决方

excel2010 打印预览不显示的解决方

显示,解决方法,电脑软件,strong,  在Excel中录入完数据以后进行打印前都会先预览打印效果,可是有些时候却不能正常显示。下面是由小编分享的excel2010 打印预览不显示的解决方法,希望对你有用。excel2010 打印预览不显示的解决方法预览不显…

word2010中怎么输入根号word2010中

word2010中怎么输入根号word2010中

输入,方法,步骤,根号,电脑软件,  今天有人问了一个问题,说是在word中使用域输入二分之三次根号下二,经过琢磨和研究,终于解决了问题,那么下面就由小编给大家分享下word2010中输入根号的技巧,希望能帮助到您。word2010中输入根号的步骤步骤一:虽…

Word 2016中怎样设置文档自动恢复

Word 2016中怎样设置文档自动恢复

设置,恢复,文档,方法,功能,  编辑文档时,如果突然发生了停电、电脑死锁或程序停止响应,导致你文档没有保存。那么能够巧妙利用自动恢复功能,就能避免这些事情发生。以下是小编为您带来的关于Word 2016中设置文档自动恢复功能的方法,希望对您…

Excel2013怎么在表格中任意划线Exc

Excel2013怎么在表格中任意划线Exc

方法,步骤,表格,电脑软件,strong,  工作中常遇到需要在表格中对某些部分任意标出,达到如用笔在纸质表格上表明一样的效果。利用插入形状,能够实现。具体怎么做呢?下面小编来告诉你Excel2013在表格中任意划线的方法吧。希望对你有帮助!Excel 2…

在PPT2007演示文稿中怎么插入小视

在PPT2007演示文稿中怎么插入小视

小视频,演示文稿,电脑软件,  在ppt中插入一个视频,能够使得整个幻灯片看起来内容更加的充实,大家想一下在一个图文并茂的课件中,如果再加上一段视频的点缀,那整个幻灯片看起来会更加的锦上添花。以下是小编为您带来的关于PPT2007中插入小视频…