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 相关文章推荐
InnerHtml和InnerText的区别分析
Mar 13 Javascript
使用javascript实现简单的选项卡切换
Jan 09 Javascript
浅谈javascript的call()、apply()、bind()的用法
Feb 21 Javascript
javascript中Date对象应用之简易日历实现
Jul 12 Javascript
React+react-dropzone+node.js实现图片上传的示例代码
Aug 23 Javascript
浅谈node的事件机制
Oct 09 Javascript
JavaScript选择排序算法原理与实现方法示例
Aug 06 Javascript
浅谈webpack devtool里的7种SourceMap模式
Jan 14 Javascript
教你完全理解ReentrantLock重入锁
Jun 03 Javascript
微信小程序实现上拉加载功能
Nov 20 Javascript
Vue实现简易计算器
Feb 25 Javascript
vue点击标签切换选中及互相排斥操作
Jul 17 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
咖啡知识大全
2021/03/03 新手入门
解析MySql与Java的时间类型
2013/06/22 PHP
解决FastCGI 进程超过了配置的活动超时时限的问题
2013/07/03 PHP
搭建Vim为自定义的PHP开发工具的一些技巧
2015/12/11 PHP
浅析PHP反序列化中过滤函数使用不当导致的对象注入问题
2020/02/15 PHP
css图片自适应大小
2007/11/28 Javascript
jQuery实现自动调整字体大小的方法
2015/06/15 Javascript
javascript特殊日历控件分享
2016/03/07 Javascript
js Canvas实现的日历时钟案例分享
2016/12/25 Javascript
使用重写url机制实现验证码换一张功能
2017/08/01 Javascript
解决微信二次分享不显示摘要和图片的问题
2017/08/18 Javascript
Vue组件开发技巧总结
2018/03/04 Javascript
react native 获取地理位置的方法示例
2018/08/28 Javascript
微信小程序日历组件使用方法详解
2018/12/29 Javascript
vue 列表页跳转详情页获取id以及详情页通过id获取数据
2019/03/27 Javascript
Vue修改项目启动端口号方法
2019/11/07 Javascript
微信小程序select下拉框实现源码
2019/11/08 Javascript
如何在JavaScript中使用localStorage详情
2021/02/04 Javascript
深入理解Python3中的http.client模块
2017/03/29 Python
python编写Logistic逻辑回归
2020/12/30 Python
Python 经典面试题 21 道【不可错过】
2018/09/21 Python
Python基于datetime或time模块分别获取当前时间戳的方法实例
2019/02/19 Python
使用python接入微信聊天机器人
2020/03/31 Python
Python基于Opencv来快速实现人脸识别过程详解(完整版)
2019/07/11 Python
在Python中使用K-Means聚类和PCA主成分分析进行图像压缩
2020/04/10 Python
法国最大的在线眼镜店:EasyLunettes
2019/08/26 全球购物
Jack Rogers官网:美国经典的女性鞋靴品牌
2019/09/04 全球购物
长曲棍球装备:Lacrosse Monkey
2020/12/02 全球购物
大学英语演讲稿(中英文对照)
2014/01/14 职场文书
手机被没收检讨书
2014/02/22 职场文书
高中运动会广播稿
2014/09/16 职场文书
公安机关纪律作风整顿个人剖析材料材料
2014/10/10 职场文书
大二学生自我检讨书
2014/10/23 职场文书
拾金不昧表扬信怎么写
2015/05/04 职场文书
apache基于端口创建虚拟主机的示例
2021/04/24 Servers
图文详解Nginx版本平滑升级方案
2021/09/15 Servers