JS+HTML5实现图片在线预览功能


Posted in Javascript onJuly 22, 2017

本文实例为大家分享了HTML5图片在线预览的具体代码,供大家参考,具体内容如下

<!DOCTYPE html>
<html>
<head>
  <title>HTML5图片预览</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <script src="http://img9.tongzhuo100.com/js/jquery-1.7.2.min.js"></script>
  <style>
    .hide
    {
      display:none;
    }
  </style>
</head>
<body>
<h3>请选择一张JPG/GIF的图片</h3>
<form name="form0" id="form0" >
  <input type="file" name="file0" id="file0" multiple="multiple" />
  <br><br><img src="" id="img0" width="120" class="hide">
</form>
<script>
  $("#file0").change(function(){
    var objUrl = getObjectURL(this.files[0]) ;
    console.log("objUrl = "+objUrl) ;
    if (objUrl) 
    {
      $("#img0").attr("src", objUrl);
      $("#img0").removeClass("hide");
    }
  }) ;
  function getObjectURL(file) 
  {
    var url = null ;
    if (window.createObjectURL!=undefined) 
    { // basic
      url = window.createObjectURL(file) ;
    }
    else if (window.URL!=undefined) 
    {
      // mozilla(firefox)
      url = window.URL.createObjectURL(file) ;
    } 
    else if (window.webkitURL!=undefined) {
      // webkit or chrome
      url = window.webkitURL.createObjectURL(file) ;
    }
    return url ;
  }
</script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript实现页面滚动图片加载(仿lazyload效果)
Jul 22 Javascript
关于textarea提交的内容无法换行的解决办法
Apr 09 Javascript
jquery 提交值不为空的元素示例代码
May 10 Javascript
Jquery遍历节点的方法小集
Jan 22 Javascript
jquery获取radio值实例
Oct 16 Javascript
基于javascript实现tab选项卡切换特效调试笔记
Mar 30 Javascript
JavaScript常用字符串与数组扩展函数小结
Apr 24 Javascript
使用jQuery处理AJAX请求的基础学习教程
May 10 Javascript
JS/jQ实现免费获取手机验证码倒计时效果
Jun 13 Javascript
JS原型对象的创建方法详解
Jun 16 Javascript
基于JavaScript中标识符的命名规则介绍
Jan 06 Javascript
mpvue实现左侧导航与右侧内容的联动
Oct 21 Javascript
JQuery和html+css实现带小圆点和左右按钮的轮播图实例
Jul 22 #jQuery
JS原生带小白点轮播图实例讲解
Jul 22 #Javascript
JS按钮闪烁功能的实现代码
Jul 21 #Javascript
荐书|您有一份JavaScript书单待签收
Jul 21 #Javascript
bootstrap插件treeview实现全选父节点下所有子节点和反选功能
Jul 21 #Javascript
Node接收电子邮件的实例代码
Jul 21 #Javascript
基于JavaScript实现无限加载瀑布流
Jul 21 #Javascript
You might like
《星际争霸》各版本雷兽特点图文解析 雷兽不同形态一览
2020/03/02 星际争霸
PHP以指定字段为索引返回数据库所取的数据数组
2013/06/30 PHP
php实现MD5加密16位(不要默认的32位)
2013/08/12 PHP
php实现的DateDiff和DateAdd时间函数代码分享
2014/08/16 PHP
php实现根据词频生成tag云的方法
2015/04/17 PHP
PHP整合PayPal支付
2015/06/11 PHP
PHP计算当前坐标3公里内4个角落的最大最小经纬度实例
2016/02/26 PHP
PHP+MySQL实现模糊查询员工信息功能示例
2018/06/01 PHP
Javascript 实现TreeView CheckBox全选效果
2010/01/11 Javascript
jquery ajax学习笔记2 使用XMLHttpRequest对象的responseXML
2011/10/16 Javascript
Javascript算符的优先级介绍
2013/03/20 Javascript
一个判断抢购时间是否到达的简单的js函数
2014/06/23 Javascript
jquery实现全选功能效果的实现代码
2016/05/05 Javascript
使用AJAX实现Web页面进度条的实例分享
2016/05/06 Javascript
关于js函数解释(包括内嵌,对象等)
2016/11/20 Javascript
Angular-Touch库用法示例
2016/12/22 Javascript
Vue实现购物车功能
2017/04/27 Javascript
将Sublime Text 3 添加到右键中的简单方法
2017/12/12 Javascript
jQuery 操作 HTML 元素和属性的方法
2018/11/12 jQuery
微信小程序设置滚动条过程详解
2019/07/25 Javascript
Vue 自定义标签的src属性不能使用相对路径的解决
2019/09/17 Javascript
[02:51]DOTA2 Supermajor小组分组对阵抽签仪式
2018/06/01 DOTA
Python2.7下安装Scrapy框架步骤教程
2017/12/22 Python
使用python中的in ,not in来检查元素是不是在列表中的方法
2018/07/06 Python
如何使用Python实现自动化水军评论
2019/06/26 Python
Django实现发送邮件找回密码功能
2019/08/12 Python
Python执行时间的几种计算方法
2020/07/31 Python
python 简单的调用有道翻译
2020/11/25 Python
HTML5中的nav标签学习笔记
2016/06/24 HTML / CSS
详解淘宝H5 sign加密算法
2020/08/25 HTML / CSS
俄罗斯和世界各地的酒店预订:Hotels.com俄罗斯
2016/08/19 全球购物
个人实用简单的自我评价
2013/10/19 职场文书
护理专业毕业生自我鉴定总结
2014/03/24 职场文书
个人合伙协议书范本
2014/10/14 职场文书
感恩教师节主题班会
2015/08/12 职场文书
Mysql排序的特性详情
2021/11/01 MySQL