脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JS上传图片预览功能

简单实现JS上传图片预览功能

 更新时间：2017年04月14日 11:28:46   作者：daodanxiong  
这篇文章主要为大家详细介绍了如何简单实现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);
    }
  })
})

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

您可能感兴趣的文章:

相关文章

  • 利用JS判断字符串是否含有数字与特殊字符的方法小结

    利用JS判断字符串是否含有数字与特殊字符的方法小结

    在我们日常工作的时候，利用javaScript判断一个字符串中是否包括有数字和"-"，在一些表单提交的地方，这是比较有用的常规判断，这里收集有几种不同的方法，最后还将简要介绍下isNAN函数的使用方法和例子，有需要的朋友们可以参考借鉴，下面来一起看看吧。
    2016-11-11
  • js实现倒计时关键代码

    js实现倒计时关键代码

    这篇文章主要为大家详细介绍了js实现倒计时的关键代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-05-05
  • 移动端H5页面返回并刷新页面（BFcache）的方法

    移动端H5页面返回并刷新页面（BFcache）的方法

    这篇文章主要给大家介绍了关于移动端H5页面返回并刷新页面（BFcache）的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2018-11-11
  • JavaScript箭头函数中的this详解

    JavaScript箭头函数中的this详解

    这篇文章主要介绍了JavaScript箭头函数中的this详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，,需要的朋友可以参考下
    2019-06-06
  • 关于javascript event flow 的一个bug详解

    关于javascript event flow 的一个bug详解

    描述了firefox，safari 有一个bug和DOM 3 规范不一致：在event.currentTarget等于event.target的时候（即event flow处于target phase时），会调用添加到currentTarget上的useCapture为true的listener
    2013-09-09
  • JS OOP包机制,类创建的方法定义

    JS OOP包机制,类创建的方法定义

    JS OOP包机制,类创建的方法定义,需要的朋友可以参考下。
    2009-11-11
  • javascript结合ajax读取txt文件内容

    javascript结合ajax读取txt文件内容

    这篇文章主要介绍了javascript结合ajax读取txt文件内容，方法非常简单，很实用，这里推荐给大家
    2014-12-12
  • 简述JS浏览器的三种弹窗

    简述JS浏览器的三种弹窗

    本文给大家简单介绍了JS浏览器的三种弹窗，简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧
    2018-07-07
  • JavaScript 函数用法详解【函数定义、参数、绑定、作用域、闭包等】

    JavaScript 函数用法详解【函数定义、参数、绑定、作用域、闭包等】

    这篇文章主要介绍了JavaScript 函数用法,结合实例形式分析了JavaScript函数定义、参数、绑定、作用域、闭包、回调函数、柯理化函数等相关概念、原理与操作注意事项,需要的朋友可以参考下
    2020-05-05
  • 用js控制电灯开关

    用js控制电灯开关

    这篇文章主要为大家详细介绍了用js控制电灯开关，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-04-04

最新评论