js实现图片上传即时显示效果


Posted in Javascript onSeptember 30, 2019

前言

h5实训时实现的一个图片上传即时显示的效果,如下图所示

js实现图片上传即时显示效果

正文

Html代码

<form action="" method="POST" role="form">
 <div class="form-group">
 <label for="touxiang" >头像上传:</label>
 <input type="file" id="headPhoto" name="headPhoto" />
 <div ><img id="imag" src="img/up.png" alt="" style="height:5rem;width: 5rem;"></div>
 </div> 
</form>

js脚本代码

<script>
 /*显示上传的图片*/
  function getObjectURL(file) {
   var url = null ;
   if (window.createObjectURL!=undefined) {
   url = window.createObjectURL(file) ;
   } else if (window.URL!=undefined) {
   url = window.URL.createObjectURL(file) ;
   } else if (window.webkitURL!=undefined) { 
   url = window.webkitURL.createObjectURL(file) ;
   }
   return url ;
  }
  $('#headPhoto').change(function() {
   var eImg=$('#imag');
   eImg.attr('src', getObjectURL($(this)[0].files[0]));
   $(this).after(eImg);
  });

</script>

window.URL.createObjectURL方法
创建一个新的对象URL,该对象URL可以代表某一个指定的File对象或Blob对象.

语法:

objectURL = window.URL.createObjectURL(blob);
blob参数是一个File对象或者Blob对象.
objectURL是生成的对象URL.通过这个URL,可以获取到所指定文件的完整内容.

完整代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>图片上传</title>
 <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
 <link href=https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css rel="stylesheet">
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
 
 <form action="" method="POST" role="form">
 <div class="form-group">
 <label for="touxiang" >头像上传:</label>
 <input type="file" id="headPhoto" name="headPhoto" />
 <div ><img id="imag" src="img/up.png" alt="" style="height:5rem;width: 5rem;"></div>
 </div> 
 </form>

</body>
<script>
 /*显示上传的图片*/
  function getObjectURL(file) {
   var url = null ;
   if (window.createObjectURL!=undefined) {
   url = window.createObjectURL(file) ;
   } else if (window.URL!=undefined) { 
   url = window.URL.createObjectURL(file) ;
   } else if (window.webkitURL!=undefined) { 
   url = window.webkitURL.createObjectURL(file) ;
   }
   return url ;
  }
  $('#headPhoto').change(function() {
   var eImg=$('#imag');
   eImg.attr('src', getObjectURL($(this)[0].files[0]));
   $(this).after(eImg);
  });
 </script>
</html>

参考:链接

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Save a File Using a File Save Dialog Box
Jun 18 Javascript
javascript学习笔记(十四) window对象使用介绍
Jun 20 Javascript
实现图片预加载的三大方法及优缺点分析
Nov 19 Javascript
使用jquery+CSS3实现仿windows10开始菜单的下拉导航菜单特效
Sep 24 Javascript
微信小程序 实战程序简易新闻的制作
Jan 09 Javascript
JS实现本地存储信息的方法(基于localStorage与userData)
Feb 18 Javascript
JS获取鼠标坐标并且根据鼠标位置不同弹出不同内容
Jun 12 Javascript
bootstrap轮播模板使用方法详解
Nov 17 Javascript
彻底弄懂 JavaScript 执行机制
Oct 23 Javascript
js作用域和作用域链及预解析
Apr 11 Javascript
Vue+ElementUI使用vue-pdf实现预览功能
Nov 26 Javascript
jquery实现点击弹出对话框
Feb 08 jQuery
vue实现select下拉显示隐藏功能
Sep 30 #Javascript
createObjectURL方法实现本地图片预览
Sep 30 #Javascript
微信小程序实现分享商品海报功能
Sep 30 #Javascript
Bootstrap实现模态框效果
Sep 30 #Javascript
HTML+JavaScript实现扫雷小游戏
Sep 30 #Javascript
React+Redux实现简单的待办事项列表ToDoList
Sep 29 #Javascript
JS回调函数简单易懂的入门实例分析
Sep 29 #Javascript
You might like
php把大写命名转换成下划线分割命名
2015/04/27 PHP
PHP中strtr与str_replace函数运行性能简单测试示例
2019/06/22 PHP
JQuery验证工具类搜集整理
2013/01/16 Javascript
Web Inspector:关于在 Sublime Text 中调试Js的介绍
2013/04/18 Javascript
JavaScript中最简洁的编码html字符串的方法
2014/10/11 Javascript
JavaScript实现算术平方根算法-代码超简单
2015/09/11 Javascript
Javascript复制实例详解
2016/01/28 Javascript
仅30行代码实现Javascript中的MVC
2016/02/15 Javascript
Bootstrap字体图标无法正常显示的解决方法
2016/10/08 Javascript
javascript删除html标签函数cIsHTML
2017/01/09 Javascript
jQuery窗口拖动功能的实现代码
2017/02/04 Javascript
js实现短信发送倒计时功能(正则验证)
2017/02/10 Javascript
用vue写一个仿简书的轮播图的示例代码
2018/03/13 Javascript
Python程序设计入门(2)变量类型简介
2014/06/16 Python
python中pygame模块用法实例
2014/10/09 Python
Python Matplotlib库入门指南
2015/05/18 Python
在Windows系统上搭建Nginx+Python+MySQL环境的教程
2015/12/25 Python
定制FileField中的上传文件名称实例
2017/08/23 Python
Python Nose框架编写测试用例方法
2017/10/26 Python
python3.7实现云之讯、聚合短信平台的短信发送功能
2019/09/26 Python
python 从list中随机取值的方法
2020/11/16 Python
德国高品质男装及配饰商城:Cultizm(Raw Denim原色牛仔裤)
2018/04/16 全球购物
Hanro官网:奢华男士和女士内衣、睡衣和家居服
2018/10/25 全球购物
Noon埃及:埃及在线购物
2019/11/26 全球购物
专升本自我鉴定
2013/10/10 职场文书
结婚周年感言
2014/02/24 职场文书
运动员获奖感言
2014/08/15 职场文书
信息与计算机科学职业规划范文:成为一艘有方向的船
2014/09/11 职场文书
爱晚亭导游词
2015/02/09 职场文书
基层党支部承诺书
2015/04/30 职场文书
从严治党主题教育活动总结
2015/05/07 职场文书
农村结婚典礼主持词
2015/06/29 职场文书
观看禁毒宣传片后的感想
2015/08/11 职场文书
《当代神农氏》教学反思
2016/02/23 职场文书
如何使用CocosCreator对象池
2021/04/14 Javascript
微信告警的zabbix监控系统 监控整个NGINX集群
2022/04/18 Servers