脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js实现图片上传即时显示效果

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

 更新时间：2019年09月30日 08:24:39   作者：逝不等琴生  
这篇文章主要为大家详细介绍了js实现图片上传即时显示效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

前言

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


正文

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>

参考：链接

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • JS如何定义用字符串拼接的变量

    JS如何定义用字符串拼接的变量

    这篇文章主要介绍了JS如何定义用字符串拼接的变量,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-07-07
  • JS 9个Promise面试题

    JS 9个Promise面试题

    这篇文章主要介绍了JS 9个Promise面试题，对异步Promise感兴趣的同学，可以参考下
    2021-05-05
  • 详解小程序如何动态绑定点击的执行方法

    详解小程序如何动态绑定点击的执行方法

    这篇文章主要介绍了详解小程序如何动态绑定点击的执行方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-11-11
  • JavaScript requestAnimationFrame动画详解

    JavaScript requestAnimationFrame动画详解

    这篇文章主要为大家详细介绍了JavaScript requestAnimationFrame动画，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-09-09
  • webpack4实现不同的导出类型

    webpack4实现不同的导出类型

    这篇文章主要介绍了webpack4实现不同的导出类型,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • js实现iGoogleDivDrag模块拖动层拖动特效的方法

    js实现iGoogleDivDrag模块拖动层拖动特效的方法

    这篇文章主要介绍了js实现iGoogleDivDrag模块拖动层拖动特效的方法,实例分析了javascript操作拖动层的技巧,需要的朋友可以参考下
    2015-03-03
  • JS判断空对象的几个方法大盘点

    JS判断空对象的几个方法大盘点

    在做数据交互的时候,我们经常需要判断数据或者对象是不是为空,避免当接口异常时候前端页面崩溃,下面这篇文章主要给大家介绍了关于JS判断空对象的几个方法,需要的朋友可以参考下
    2022-02-02
  • JavaScript不同场景下的文件下载方案详解

    JavaScript不同场景下的文件下载方案详解

    这篇文章主要为大家详细介绍了JavaScript中不同场景下的三种常见文件下载方案,文中的示例代码讲解详细,有需要的小伙伴可以参考一下
    2023-12-12
  • JavaScript中reduce()的用法实例

    JavaScript中reduce()的用法实例

    reduce()方法接收一个函数作为累加器(accumulator),数组中的每个值(从左到右)开始缩减,最终为一个值,下面这篇文章主要给大家介绍了关于JavaScript中reduce()的用法实例,需要的朋友可以参考下
    2022-05-05
  • Asp.Net alert弹出提示信息的几种方法总结

    Asp.Net alert弹出提示信息的几种方法总结

    本篇文章主要是对Asp.Net alert弹出提示信息的几种方法进行了总结介绍，需要的朋友可以过来参考下，希望对大家有所帮助
    2014-01-01

最新评论