简单实现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 相关文章推荐
比较详细的javascript对象的property和prototype是什么一种关系
Aug 06 Javascript
jQuery回调函数的定义及用法实例
Dec 23 Javascript
Javascript核心读书有感之语句
Feb 11 Javascript
JS绘制生成花瓣效果的方法
Aug 05 Javascript
node.js中 stream使用教程
Aug 28 Javascript
整理一下常见的IE错误
Nov 18 Javascript
从零开始学习Node.js系列教程六:EventEmitter发送和接收事件的方法示例
Apr 13 Javascript
js获取地址栏参数的两种方法
Jun 27 Javascript
angularjs实现天气预报功能
Jun 16 Javascript
Vue中mintui的field实现blur和focus事件的方法
Aug 25 Javascript
微信小程序上线发布流程图文详解
May 06 Javascript
JS 封装父页面子页面交互接口的实例代码
Jun 25 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
mysql 的 like 问题,超强毕杀记!!!
2007/01/18 PHP
php开发工具之vs2005图解
2008/01/12 PHP
用php将任何格式视频转为flv的代码
2009/09/03 PHP
PHP中定义数组常量(array常量)的方法
2014/11/17 PHP
windows下安装php的memcache模块的方法
2015/04/07 PHP
PHP数组与对象之间使用递归实现转换的方法
2015/06/24 PHP
thinkPHP中验证码的简单使用方法
2015/12/26 PHP
PHP运用foreach神奇的转换数组(实例讲解)
2018/02/01 PHP
PHP array_reverse() 函数原理及实例解析
2020/07/14 PHP
文字幻灯片
2006/06/26 Javascript
在Javascript中定义对象类别
2006/12/22 Javascript
服务器安全设置的几个注册表设置
2007/07/28 Javascript
JS小游戏之极速快跑源码详解
2014/09/25 Javascript
常用的Javascript设计模式小结
2015/12/09 Javascript
AngularJS  ng-table插件设置排序
2016/09/21 Javascript
jquery动态添加文本并获取值的方法
2016/10/12 Javascript
详解Node.js开发中的express-session
2017/05/19 Javascript
Angular X中使用ngrx的方法详解(附源码)
2017/07/10 Javascript
超级简易的JS计算器实例讲解(实现加减乘除)
2017/08/08 Javascript
微信小程序之前台循环数据绑定
2017/08/18 Javascript
js 将canvas生成图片保存,或直接保存一张图片的实现方法
2018/01/02 Javascript
基于jQuery.i18n实现web前端的国际化
2018/05/04 jQuery
[03:01]2014DOTA2国际邀请赛 DC:我是核弹粉,为Burning和国土祝福
2014/07/13 DOTA
[00:43]魔廷新尊——痛苦女王至宝捆绑包
2020/06/12 DOTA
Python2中文处理纪要的实现方法
2018/03/10 Python
python 反编译exe文件为py文件的实例代码
2019/06/27 Python
Python的条件锁与事件共享详解
2019/09/12 Python
pytorch中tensor张量数据类型的转化方式
2019/12/31 Python
python之语音识别speech模块
2020/09/09 Python
法国在线药房:Shop Pharmacie
2019/11/26 全球购物
预备党员思想汇报
2014/01/08 职场文书
酒店拾金不昧表扬信
2014/01/18 职场文书
工地质量标语
2014/06/12 职场文书
党员自我对照检查材料
2014/08/19 职场文书
2014年语文教学工作总结
2014/12/17 职场文书
中学教代会开幕词
2016/03/04 职场文书