JS+HTML5实现上传图片预览效果完整实例【测试可用】


Posted in Javascript onApril 20, 2017

本文实例讲述了JS+HTML5实现上传图片预览效果。分享给大家供大家参考,具体如下:

在项目中遇到用input标签file类型的文件上传,想实在上传之前进行图片的预览功能;之前的做的一个解决方案是文件先上传上去然后返回地址再显示在页面上,这样就不太好,因为用户基本信息可能并没有保存,但是头像却已经改变,如果在需要改变就导致了多余图片的保存服务器。

在网上找了下解决方案,如下所示:

<!DOCTYPE HTML>
<html>
  <head>
  <meta charset="utf-8">
  <title>html5 图片上传预览</title>
  <style>
    #preview {
      width: 300px;
      height: 300px;
      overflow: hidden;
    }
    #preview img {
      width: 100%;
      height: 100%;
    }
  </style>
  <script src="jquery-1.7.2.min.js"></script>
  <script type="text/javascript">
    function preview1(file) {
      var img = new Image(), url = img.src = URL.createObjectURL(file)
      var $img = $(img)
      img.onload = function() {
        URL.revokeObjectURL(url)
        $('#preview').empty().append($img)
      }
    }
    function preview2(file) {
      var reader = new FileReader()
      reader.onload = function(e) {
        var $img = $('<img>').attr("src", e.target.result)
        $('#preview').empty().append($img)
      }
      reader.readAsDataURL(file)
    }
     
    $(function() {
      $('[type=file]').change(function(e) {
        var file = e.target.files[0]
        preview1(file)
      })
    })
  </script>
</head>
<body>
<form enctype="multipart/form-data" action="" method="post">
  <input type="file" name="imageUpload"/>
  <div id="preview" style="width: 300px;height:300px;border:1px solid gray;"></div>
</form>
</body>
</html>

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
JS判断页面加载状态以及添加遮罩和缓冲动画的代码
Oct 11 Javascript
js实现键盘控制DIV移动的方法
Jan 10 Javascript
javascript委托(Delegate)blur和focus用法实例分析
May 26 Javascript
详解js中Json的语法与格式
Nov 22 Javascript
微信小程序实现页面跳转传值以及获取值的方法分析
Dec 18 Javascript
jquery.picsign图片标注组件实例详解
Feb 02 jQuery
微信小程序实现通过双向滑动缩放图片大小的方法
Dec 30 Javascript
如何优雅的在一台vps(云主机)上面部署vue+mongodb+express项目
Jan 20 Javascript
详解如何使用webpack打包多页jquery项目
Feb 01 jQuery
vue指令之表单控件绑定v-model v-model与v-bind结合使用
Apr 17 Javascript
vue输入框使用模糊搜索功能的实现代码
May 26 Javascript
JavaScript如何判断对象有某属性
Jul 03 Javascript
详解Vue使用 vue-cli 搭建项目
Apr 20 #Javascript
解决AngualrJS页面刷新导致异常显示问题
Apr 20 #Javascript
Vue.js实现模拟微信朋友圈开发demo
Apr 20 #Javascript
AngularJS 单选框及多选框的双向动态绑定
Apr 20 #Javascript
Vue如何引入远程JS文件
Apr 20 #Javascript
AngularJS改变元素显示状态
Apr 20 #Javascript
bootstrap 设置checkbox部分选中效果
Apr 20 #Javascript
You might like
重量级动漫纷纷停播!唯独OVERLORD第四季正在英魂之刃继续更新
2020/05/06 日漫
解决phpmyadmin 乱码,支持gb2312和utf-8
2006/11/20 PHP
关于PHP的curl开启问题探讨
2014/04/08 PHP
php使用mkdir创建多级目录入门例子
2014/05/10 PHP
fireworks菜单生成器mm_menu.js在 IE 7.0 显示问题的解决方法
2009/10/20 Javascript
3Z版基于jquery的图片复选框(asp.net+jquery)
2010/04/12 Javascript
Js表格万条数据瞬间加载实现代码
2014/02/20 Javascript
JavaScript参数个数可变的函数举例说明
2014/10/10 Javascript
jQuery修改li下的样式以及li下的img的src的值的方法
2014/11/02 Javascript
Jquery实现鼠标移动放大图片功能实例
2015/03/25 Javascript
jquery.map()方法的使用详解
2015/07/09 Javascript
理解和运用JavaScript的闭包机制
2015/08/13 Javascript
Javascript数组Array基础介绍
2016/03/13 Javascript
Bootstrap模态框(Modal)实现过渡效果
2017/03/17 Javascript
node安装--linux下的快速安装教程
2017/03/21 Javascript
javascript闭包功能与用法实例分析
2017/04/06 Javascript
Vue异步组件使用详解
2017/04/08 Javascript
angularjs实现柱状图动态加载的示例
2017/12/11 Javascript
arctext.js实现文字平滑弯曲弧形效果的插件
2019/05/13 Javascript
梳理一下vue中的生命周期
2020/12/30 Vue.js
[34:44]Liquid vs TNC Supermajor 胜者组 BO3 第二场 6.4
2018/06/05 DOTA
用Python操作字符串之rindex()方法的使用
2015/05/19 Python
Python argv用法详解
2016/01/08 Python
Python paramiko模块的使用示例
2018/04/11 Python
Django框架模板语言实例小结【变量,标签,过滤器,继承,html转义】
2019/05/23 Python
Python3和PyCharm安装与环境配置【图文教程】
2020/02/14 Python
CSS3制作文字半透明倒影效果的两种实现方式
2014/08/08 HTML / CSS
美国最大的购物网站:Amazon.com(亚马逊美国)
2020/05/23 全球购物
最新党员思想汇报
2014/01/01 职场文书
《荷花》教学反思
2014/04/16 职场文书
人力资源管理专业自荐信
2014/06/24 职场文书
2015年乡镇环保工作总结
2015/04/22 职场文书
刮痧观后感
2015/06/05 职场文书
使用pandas模块实现数据的标准化操作
2021/05/14 Python
OpenCV-Python实现轮廓拟合
2021/06/08 Python
python 单机五子棋对战游戏
2022/04/28 Python