简单实现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 相关文章推荐
jQuery使用手册之三 CSS操作
Mar 24 Javascript
jquery 图片截取工具jquery.imagecropper.js
Apr 09 Javascript
一个js拖拽的效果类和dom-drag.js浅析
Jul 17 Javascript
JS实现很酷的EMAIL地址添加功能实例
Feb 28 Javascript
jQuery经过一段时间自动隐藏指定元素的方法
Mar 17 Javascript
jQuery实现手机号码输入提示功能实例
Apr 30 Javascript
原生js实现省市区三级联动代码分享
Feb 12 Javascript
详解用Node.js写一个简单的命令行工具
Mar 01 Javascript
jQuery实现的简单歌词滚动功能示例
Jan 07 jQuery
layui实现鼠标移动到单元格上显示数据的方法
Sep 11 Javascript
微信小程序canvas分享海报功能
Oct 31 Javascript
js实现移动端吸顶效果
Jan 08 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
搜索和替换文件或目录的一个好类--很实用
2006/10/09 PHP
不使用php api函数实现数组的交换排序示例
2014/04/13 PHP
ThinkPHP调试模式与日志记录概述
2014/08/22 PHP
php输入流php://input使用浅析
2014/09/02 PHP
PHP代码判断设备是手机还是平板电脑(两种方法)
2015/10/19 PHP
PHP Yii框架之表单验证规则大全
2015/11/16 PHP
php简单实现批量上传图片的方法
2016/05/09 PHP
ExtJS 2.0实用简明教程 之Ext类库简介
2009/04/29 Javascript
Jquery在IE7下无法使用 $.ajax解决方法
2009/11/11 Javascript
判断控件是否已加载完成的代码
2010/02/24 Javascript
javascript操纵OGNL标签示例代码
2014/06/16 Javascript
js删除数组元素、清空数组的简单方法(必看)
2016/07/27 Javascript
实现React单页应用的方法详解
2016/08/02 Javascript
JS获取鼠标相对位置的方法
2016/09/20 Javascript
angular双向绑定模拟探索
2016/12/26 Javascript
微信小程序分页加载的实例代码
2017/07/11 Javascript
Vue中的ref作用详解(实现DOM的联动操作)
2017/08/21 Javascript
fetch 如何实现请求数据
2018/12/20 Javascript
Vue动态创建注册component的实例代码
2019/06/14 Javascript
python 生成器生成杨辉三角的方法(必看)
2017/04/10 Python
Python实现带参数与不带参数的多重继承示例
2018/01/30 Python
Python OpenCV中的resize()函数的使用
2019/06/20 Python
python web框架Flask实现图形验证码及验证码的动态刷新实例
2019/10/14 Python
tensorflow 固定部分参数训练,只训练部分参数的实例
2020/01/20 Python
python将dict中的unicode打印成中文实例
2020/05/11 Python
Python基础教程(一)——Windows搭建开发Python开发环境
2020/07/20 Python
python利用faker库批量生成测试数据
2020/10/15 Python
美国Randolph太阳镜官网:美国制造的飞行员太阳镜和射击眼镜
2018/06/15 全球购物
UDP协议功能
2013/01/06 面试题
竞聘书模板
2014/03/31 职场文书
关于爱国的标语
2014/06/24 职场文书
圆明园观后感
2015/06/03 职场文书
javascript函数式编程基础
2021/09/15 Javascript
redis缓存存储Session原理机制
2021/11/20 Redis
JavaScript实现两个数组的交集
2022/03/25 Javascript
插件导致ECharts被全量引入的坑示例解析
2022/09/23 Javascript