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 相关文章推荐
EasyUi tabs的高度与宽度根据IE窗口的变化自适应代码
Oct 26 Javascript
JavaScript面向对象设计二 构造函数模式
Dec 20 Javascript
jquery 动态创建元素的方式介绍及应用
Apr 21 Javascript
jQuery异步加载数据并添加事件示例
Aug 24 Javascript
jQuery选择器源码解读(一):Sizzle方法
Mar 31 Javascript
Angularjs使用directive自定义指令实现attribute继承的方法详解
Aug 05 Javascript
js实现弹窗暗层效果
Jan 16 Javascript
详解jquery插件jquery.viewport.js学习使用方法
Sep 08 jQuery
微信小程序用户位置权限的获取方法(拒绝后提醒)
Nov 15 Javascript
微信小程序清空输入框信息与实现屏幕往上滚动的示例代码
Jun 23 Javascript
Vue 实现v-for循环的时候更改 class的样式名称
Jul 17 Javascript
vue点击按钮实现简单页面的切换
Sep 08 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
第十四节 命名空间 [14]
2006/10/09 PHP
PHP 编写的 25个游戏脚本
2009/05/11 PHP
php echo()和print()、require()和include()函数区别说明
2010/03/27 PHP
PHPMailer邮件发送的实现代码
2013/05/04 PHP
PHP6连接SQLServer2005的三部曲
2016/04/15 PHP
一个简单的php MVC留言本实例代码(必看篇)
2016/09/22 PHP
php封装db类连接sqlite3数据库的方法实例
2017/12/19 PHP
图片自动更新(说明)
2006/10/02 Javascript
jQuery语法总结和注意事项小结
2012/11/11 Javascript
javascript 拷贝节点cloneNode()使用介绍
2014/04/03 Javascript
js实现点击图片将图片地址复制到粘贴板的方法
2015/02/16 Javascript
jQuery弹出层插件Lightbox_me使用指南
2015/04/21 Javascript
javascript实现的固定位置悬浮窗口实例
2015/04/30 Javascript
Mongoose学习全面理解(推荐)
2017/01/21 Javascript
ajax实现加载页面、删除、查看详细信息 bootstrap美化页面!
2017/03/14 Javascript
vue如何引用其他组件(css和js)
2017/04/13 Javascript
Angular 2.x学习教程之结构指令详解
2017/05/25 Javascript
vue.js源代码core scedule.js学习笔记
2017/07/03 Javascript
如何编写一个完整的Angular4 FormText 组件
2017/11/18 Javascript
小程序云开发初探(小结)
2018/10/24 Javascript
详解微信小程序图片地扯转base64解决方案
2019/08/18 Javascript
[04:19]完美世界携手游戏风云打造 卡尔工作室模型介绍篇
2013/04/24 DOTA
python连接mysql调用存储过程示例
2014/03/05 Python
python下解压缩zip文件并删除文件的实例
2018/04/24 Python
python中提高pip install速度
2020/02/14 Python
Django实现图片上传功能步骤解析
2020/04/22 Python
10个python爬虫入门基础代码实例 + 1个简单的python爬虫完整实例
2020/12/16 Python
python regex库实例用法总结
2021/01/03 Python
python 获取谷歌浏览器保存的密码
2021/01/06 Python
浅谈html5 响应式布局
2014/12/24 HTML / CSS
H5 meta小结(前端必看篇)
2016/08/24 HTML / CSS
NYX Professional Makeup官方网站:专业彩妆和美容产品
2019/10/29 全球购物
求职简历的自我评价怎样写好
2013/10/07 职场文书
党员学习中共十八大报告思想汇报
2014/09/15 职场文书
公司出差管理制度范本
2015/08/05 职场文书
2016七夕情人节广告语
2016/01/28 职场文书