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 相关文章推荐
JSON 学习之完全手册 图文
May 29 Javascript
JavaScript-世界上误解最深的语言分析
Aug 12 Javascript
javascript比较文档位置
Apr 08 Javascript
如何动态的导入js文件具体该怎么实现
Jan 14 Javascript
JavaScript重定向URL参数的两种方法小结
Oct 19 Javascript
Bootstrap的popover(弹出框)2秒后定时消失的实现代码
Feb 27 Javascript
AngularJS表单验证功能
Oct 19 Javascript
代码详解Vuejs响应式原理
Dec 20 Javascript
利用vue + element实现表格分页和前端搜索的方法
Dec 25 Javascript
JavaScript图片处理与合成总结
Mar 04 Javascript
vue todo-list组件发布到npm上的方法
Apr 04 Javascript
详解a标签添加onclick事件的几种方式
Mar 29 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安全配置详细说明
2011/09/26 PHP
php小经验:解析preg_match与preg_match_all 函数
2013/06/29 PHP
php监测数据是否成功插入到Mysql数据库的方法
2016/11/25 PHP
Laravel框架Blade模板简介及模板继承用法分析
2019/12/03 PHP
Firefox 无法获取cssRules 的解决办法
2006/10/11 Javascript
filemanage功能中用到的lib.js
2007/04/08 Javascript
js 学习笔记(三)
2009/12/29 Javascript
JavaScript/jQuery 表单美化插件小结
2012/02/14 Javascript
JS实现alert中显示换行的方法
2015/12/17 Javascript
轻松实现jquery手风琴效果
2016/01/14 Javascript
H5移动端图片压缩上传开发流程
2016/11/09 Javascript
AngularJS入门教程之Helloworld示例
2016/12/25 Javascript
JavaScript 五大常见函数
2018/03/23 Javascript
浅析Vue 生命周期
2018/06/21 Javascript
vue服务端渲染缓存应用详解
2018/09/12 Javascript
electron中使用bootstrap的示例代码
2018/11/06 Javascript
JavaScript制作3D旋转相册
2020/08/02 Javascript
element表格翻页第2页从1开始编号(后端从0开始分页)
2019/12/10 Javascript
python发腾讯微博代码分享
2014/01/10 Python
python使用pipeline批量读写redis的方法
2019/02/18 Python
学习python分支结构
2019/05/17 Python
python for循环remove同一个list过程解析
2019/08/14 Python
python opencv图片编码为h264文件的实例
2019/12/12 Python
Tensorflow:转置函数 transpose的使用详解
2020/02/11 Python
tensorboard显示空白的解决
2020/02/15 Python
python绘制封闭多边形教程
2020/02/18 Python
Python读取yaml文件的详细教程
2020/07/21 Python
关于python中导入文件到list的问题
2020/10/31 Python
python 发送邮件的四种方法汇总
2020/12/02 Python
美国学校校服,儿童和婴儿服装:Cookie’s Kids
2016/10/14 全球购物
Under Armour澳大利亚官网:美国知名的高端功能性运动品牌
2018/02/22 全球购物
意大利奢侈品牌在线精品店:Jole.it
2020/11/23 全球购物
什么是设计模式
2012/06/17 面试题
技术比武方案
2014/05/19 职场文书
2014党员学习兰辉先进事迹思想汇报
2014/09/17 职场文书
mysql5.5中文乱码问题解决的有用方法
2022/05/30 MySQL