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


Posted in Javascript onApril 14, 2017

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 相关文章推荐
JS类中定义原型方法的两种实现的区别
Mar 08 Javascript
解析使用js判断只能输入数字、字母等验证的方法(总结)
May 14 Javascript
JS图像无缝滚动脚本非常好用
Feb 10 Javascript
jquery操作select大全
Apr 25 Javascript
jQuery实现ajax的叠加和停止(终止ajax请求)
Aug 08 Javascript
canvas绘制七巧板
Feb 03 Javascript
微信小程序 选项卡的简单实例
May 24 Javascript
JS实现点击Radio动态更新table数据
Jul 18 Javascript
基于jQuery实现手风琴菜单、层级菜单、置顶菜单、无缝滚动效果
Jul 20 jQuery
在一个页面实现两个zTree联动的方法
Dec 20 Javascript
详解Vue.js使用Swiper.js在iOS
Sep 10 Javascript
node命令行工具之实现项目工程自动初始化的标准流程
Aug 12 Javascript
基于JavaScript实现的快速排序算法分析
Apr 14 #Javascript
微信小程序中的swiper组件详解
Apr 14 #Javascript
深入解析js轮播插件核心代码的实现过程
Apr 14 #Javascript
基于JavaScript实现的希尔排序算法分析
Apr 14 #Javascript
Vue2.0 UI框架ElementUI使用方法详解
Apr 14 #Javascript
iOS + node.js使用Socket.IO框架进行实时通信示例
Apr 14 #Javascript
JavaScript Canvas绘制圆形时钟效果
Aug 20 #Javascript
You might like
php中选择什么接口(mysql、mysqli)访问mysql
2013/02/06 PHP
PHP set_error_handler()函数使用详解(示例)
2013/11/12 PHP
php+mysqli使用面向对象方式查询数据库实例
2015/01/29 PHP
PHP对文件夹递归执行chmod命令的方法
2015/06/19 PHP
jQuery Ajax文件上传(php)
2009/06/16 Javascript
jQuery ajax cache缓存问题
2010/07/01 Javascript
JavaScript Array Flatten 与递归使用介绍
2011/10/30 Javascript
jquery将一个表单序列化为一个对象的方法
2014/01/03 Javascript
jQuery选择器全集详解
2014/11/24 Javascript
js获取时间并实现字符串和时间戳之间的转换
2015/01/05 Javascript
JS+CSS实现感应鼠标渐变显示DIV层的方法
2015/02/20 Javascript
Nodejs学习笔记之入门篇
2015/04/16 NodeJs
原生js实现数字字母混合验证码的简单实例
2015/12/10 Javascript
javascript之with的使用(阿里云、淘宝使用代码分析)
2016/10/11 Javascript
jQuery操作json常用方法示例
2017/01/04 Javascript
详解基于webpack和vue.js搭建开发环境
2017/04/05 Javascript
nodejs个人博客开发第六步 数据分页
2017/04/12 NodeJs
JS+HTML5实现图片在线预览功能
2017/07/22 Javascript
微信小程序实现页面跳转传值以及获取值的方法分析
2017/12/18 Javascript
js中el表达式的使用和非空判断方法
2018/03/28 Javascript
javascriptvoid(0)含义以及与&quot;#&quot;的区别讲解
2019/01/19 Javascript
js消除图片小游戏代码
2019/12/11 Javascript
python 删除大文件中的某一行(最有效率的方法)
2017/08/19 Python
Python3.5 处理文本txt,删除不需要的行方法
2018/12/10 Python
Python3.6中Twisted模块安装的问题与解决
2019/04/15 Python
Pycharm简单使用教程(入门小结)
2019/07/04 Python
python 利用matplotlib在3D空间绘制二次抛物面的案例
2021/02/06 Python
Html5移动端适配IphoneX等机型的方法
2019/06/25 HTML / CSS
运动鞋中的劳斯莱斯:索康尼(SAUCONY)
2017/08/09 全球购物
TIME时代杂志台湾总代理:台时亚洲
2018/10/22 全球购物
Nike瑞典官方网站:Nike.com (SE)
2018/11/26 全球购物
市级青年文明号申报材料
2014/05/26 职场文书
数学教育专业求职信
2014/07/22 职场文书
2015年置业顾问工作总结
2015/04/07 职场文书
初中班主任培训心得体会
2016/01/07 职场文书
《中彩那天》教学反思
2016/02/24 职场文书