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 相关文章推荐
仿新浪微博返回顶部的jquery实现代码
Oct 01 Javascript
javascript限制文本框输入值类型的方法
May 07 Javascript
简单谈谈Javascript中类型的判断
Oct 19 Javascript
果断收藏9个Javascript代码高亮脚本
Jan 06 Javascript
微信小程序 教程之WXSS
Oct 18 Javascript
基于jQuery和Bootstrap框架实现仿知乎前端动态列表效果
Nov 09 Javascript
Bootstrap 3 进度条的实现
Feb 22 Javascript
JavaScript中清空数组的三种方式
Mar 22 Javascript
JS简单生成随机数(随机密码)的方法
May 11 Javascript
js中时间格式化的几种方法
Jul 22 Javascript
jQuery实现菜单的显示和隐藏功能示例
Jul 24 jQuery
微信小程序实现自定义底部导航
Nov 18 Javascript
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数字格式化
2006/12/06 PHP
PHP 实用代码收集
2010/01/22 PHP
PHP中header和session_start前不能有输出原因分析
2013/01/11 PHP
thinkphp循环结构用法实例
2014/11/24 PHP
Zend Framework入门教程之Zend_Db数据库操作详解
2016/12/08 PHP
js打印纸函数代码(递归)
2010/06/18 Javascript
jQuery)扩展jQuery系列之一 模拟alert,confirm(一)
2010/12/04 Javascript
对xmlHttp对象方法和属性的理解
2011/01/17 Javascript
中文字符串截取的js函数代码
2013/04/17 Javascript
在JavaScript的AngularJS库中进行单元测试的方法
2015/06/23 Javascript
Jquery-1.9.1源码分析系列(十一)之DOM操作
2015/11/25 Javascript
JS for循环中i++ 和 ++i的区别介绍
2016/07/20 Javascript
ionic组件ion-tabs选项卡切换效果实例
2016/08/27 Javascript
js实现可旋转的立方体模型
2016/10/16 Javascript
webstrom Debug 调试vue项目的方法步骤
2018/07/17 Javascript
详解使用VueJS开发项目中的兼容问题
2018/08/02 Javascript
AjaxFileUpload.js实现异步上传文件功能
2019/04/19 Javascript
vue项目中全局引入1个.scss文件的问题解决
2019/08/01 Javascript
在vue中利用全局路由钩子给url统一添加公共参数的例子
2019/11/01 Javascript
详解JavaScript之Array.reduce源码解读
2020/11/01 Javascript
[01:19:11]Ti4 循环赛第二日 NaVi.us vs iG
2014/07/11 DOTA
Python中Collections模块的Counter容器类使用教程
2016/05/31 Python
python批量导入数据进Elasticsearch的实例
2018/05/30 Python
Pandas之ReIndex重新索引的实现
2019/06/25 Python
基于python的Paxos算法实现
2019/07/03 Python
决策树剪枝算法的python实现方法详解
2019/09/18 Python
python飞机大战 pygame游戏创建快速入门详解
2019/12/17 Python
详解如何修改python中字典的键和值
2020/09/29 Python
用python对oracle进行简单性能测试
2020/12/05 Python
全球最大的服务市场:Fiverr
2017/01/03 全球购物
小学校园广播稿(3篇)
2014/09/19 职场文书
停课通知书
2015/04/24 职场文书
2015年艾滋病防治工作总结
2015/05/22 职场文书
新党员入党决心书
2015/09/22 职场文书
详解nginx进程锁的实现
2021/06/14 Servers
Nginx配置之禁止指定IP访问
2022/05/02 Servers