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分页函数代码
Sep 10 Javascript
javascript使用avalon绑定实现checkbox全选
May 06 Javascript
在Node.js应用中读写Redis数据库的简单方法
Jun 30 Javascript
跟我学习javascript的垃圾回收机制与内存管理
Nov 23 Javascript
Angularjs中使用轮播图指令swiper
May 30 Javascript
详解如何使用webpack+es6开发angular1.x
Aug 16 Javascript
全面介绍vue 全家桶和项目实例
Dec 27 Javascript
jQuery简单实现根据日期计算星期几的方法
Jan 09 jQuery
React+TypeScript+webpack4多入口配置详解
Aug 08 Javascript
在vue和element-ui的table中实现分页复选功能
Dec 04 Javascript
jQuery实现移动端图片上传预览组件的方法分析
May 01 jQuery
js+audio实现音乐播放器
Sep 13 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
用php和MySql来与ODBC数据连接
2006/10/09 PHP
自动生成文章摘要的代码[PHP 版本]
2007/03/20 PHP
Smarty中常用变量操作符汇总
2014/10/27 PHP
10条php编程小技巧
2015/07/07 PHP
PHP设计模式之简单投诉页面实例
2016/02/24 PHP
YII2框架中日志的配置与使用方法实例分析
2020/03/18 PHP
实例:用 JavaScript 来操作字符串(一些字符串函数)
2007/02/15 Javascript
jquery向.ashx文件post中文乱码问题的解决方法
2011/03/28 Javascript
JQuery扩展插件Validate—6 radio、checkbox、select的验证
2011/09/05 Javascript
如何实现修改密码时密码框显示保存到cookie的密码
2013/12/10 Javascript
用js将内容复制到剪贴板兼容浏览器
2014/03/18 Javascript
讲解JavaScript中for...in语句的使用方法
2015/06/03 Javascript
jquery实现选中单选按钮下拉伸缩效果
2015/08/06 Javascript
js中实现字符串和数组的相互转化详解
2016/01/24 Javascript
Node.js中用D3.js的方法示例
2017/01/16 Javascript
微信小程序实现移动端滑动分页效果(ajax)
2017/06/13 Javascript
JS图片延迟加载插件LazyImgv1.0用法分析【附demo源码下载】
2017/09/04 Javascript
JavaScript的setter与getter方法
2017/11/29 Javascript
layui监听单元格编辑前后交互的例子
2019/09/16 Javascript
基于vue项目设置resolves.alias: '@'路径并适配webstorm
2020/12/02 Vue.js
[01:50]2014DOTA2西雅图邀请赛 专访欢乐周宝龙
2014/07/08 DOTA
[02:07]DOTA2新英雄展现中国元素,完美“圣典”亮相央视
2016/12/19 DOTA
[01:07:41]IG vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
在Django admin中编辑ManyToManyField的实现方法
2019/08/09 Python
Python基于requests实现模拟上传文件
2020/04/21 Python
django 模版关闭转义方式
2020/05/14 Python
python利用faker库批量生成测试数据
2020/10/15 Python
HTML5的一个显示电池状态的API简介
2015/06/18 HTML / CSS
amazeui页面分析之登录页面的示例代码
2020/08/25 HTML / CSS
18-35岁旅游团的全球领导者:Contiki
2017/02/08 全球购物
Farnell德国:电子元器件供应商
2018/07/10 全球购物
Python是如何进行类型转换的
2013/06/09 面试题
青春奉献演讲稿
2014/05/08 职场文书
药剂专业求职信
2014/06/20 职场文书
反腐倡廉影片观后感
2015/06/08 职场文书
Python 快速验证代理IP是否有效的方法实现
2021/07/15 Python