简单实现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 相关文章推荐
兼容IE和FF的js脚本代码小结(比较常用)
Dec 06 Javascript
JQuery1.6 使用方法三
Nov 23 Javascript
利用CSS、JavaScript及Ajax实现高效的图片预加载
Oct 16 Javascript
深入理解JavaScript系列(40):设计模式之组合模式详解
Mar 04 Javascript
ionic 上拉菜单(ActionSheet)实例代码
Jun 06 Javascript
AngularJS入门教程之链接与图片模板详解
Aug 19 Javascript
微信小程序 数据绑定详解及实例
Oct 25 Javascript
JavaScript轮播图简单制作方法
Feb 20 Javascript
详解封装基础的angular4的request请求方法
Jun 05 Javascript
webpack4 SCSS提取和懒加载的示例
Sep 03 Javascript
javascript实现画板功能
Apr 12 Javascript
vue图片裁剪插件vue-cropper使用方法详解
Dec 16 Vue.js
基于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制作图型计数器的例子
2006/10/09 PHP
PHP curl模拟浏览器采集阿里巴巴的实现代码
2011/04/20 PHP
PHP获取数据库表中的数据插入新的表再原删除数据方法
2018/10/12 PHP
javascript实现的鼠标链接提示效果生成器代码
2007/06/28 Javascript
Iframe thickbox2.0使用的方法
2009/03/05 Javascript
js实现的真正的iframe高度自适应(兼容IE,FF,Opera)
2010/03/07 Javascript
很棒的学习jQuery的12个网站推荐
2011/04/28 Javascript
按下回车键指向下一个位置的一个函数代码
2014/03/10 Javascript
轻松创建nodejs服务器(1):一个简单nodejs服务器例子
2014/12/18 NodeJs
Bootstrap table两种分页示例
2016/12/23 Javascript
Vue.js学习之计算属性
2017/01/22 Javascript
node+koa实现数据mock接口的方法
2017/09/20 Javascript
JS+Canvas绘制动态时钟效果
2017/11/10 Javascript
JS实现为动态创建的元素添加事件操作示例
2018/03/17 Javascript
使用validate.js实现表单数据提交前的验证方法
2018/09/04 Javascript
javascript将扁平的数据转为树形结构的高效率算法
2020/02/27 Javascript
在vue中获取wangeditor的html和text的操作
2020/10/23 Javascript
[02:32]DOTA2英雄基础教程 美杜莎
2014/01/07 DOTA
[01:02]DOTA2辉夜杯决赛日 CDEC.Y对阵VG赛前花絮
2015/12/27 DOTA
Django 添加静态文件的两种实现方法(必看篇)
2017/07/14 Python
python机器学习之KNN分类算法
2018/08/29 Python
解决python中用matplotlib画多幅图时出现图形部分重叠的问题
2019/07/07 Python
美国环保婴儿用品公司:The Honest Company
2017/11/23 全球购物
澳洲小众品牌的集合网站:BNKR
2018/02/23 全球购物
电子商务专员岗位职责
2013/12/11 职场文书
出纳会计岗位职责
2014/03/12 职场文书
公务员诚信承诺书
2014/05/26 职场文书
教师个人读书活动总结
2014/07/08 职场文书
成绩报告单家长评语
2014/12/30 职场文书
医德医风个人总结
2015/02/28 职场文书
劳动仲裁调解书
2015/05/20 职场文书
教师师德工作总结2015
2015/07/22 职场文书
MySQL 8.0 之不可见列的基本操作
2021/05/20 MySQL
Pygame Event事件模块的详细示例
2021/11/17 Python
Python中with上下文管理协议的作用及用法
2022/03/18 Python
MySQL性能指标TPS+QPS+IOPS压测
2022/08/05 MySQL