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 相关文章推荐
初探jquery——表单应用范例
Feb 20 Javascript
使一个函数作为另外一个函数的参数来运行的javascript代码
Aug 13 Javascript
javascript 特性检测并非浏览器检测
Jan 15 Javascript
在Javascript中 声明时用&quot;var&quot;与不用&quot;var&quot;的区别
Apr 15 Javascript
jquery实现tr元素的上下移动示例代码
Dec 20 Javascript
js+jquery常用知识点汇总
Mar 03 Javascript
编写高性能Javascript代码的N条建议
Oct 12 Javascript
在localStorage中存储对象数组并读取的方法
Sep 24 Javascript
浅谈JS如何实现真正的对象常量
Jun 25 Javascript
基于substring()和substr()的使用以及区别(实例讲解)
Dec 28 Javascript
jQuery实现的两种简单弹窗效果示例
Apr 18 jQuery
JS监听组合按键思路及实现过程
Apr 17 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
php实现的简单压缩英文字符串的代码
2008/04/24 PHP
关于php 接口问题(php接口主要也就是运用curl,curl函数)
2013/07/01 PHP
PHP连接sql server 2005环境配置及问题解决
2014/08/08 PHP
php删除数组中重复元素的方法
2015/12/22 PHP
php 截取GBK文档某个位置开始的n个字符方法
2017/03/08 PHP
ExtJS 入门
2010/10/29 Javascript
JavaScript 更严格的相等 [译]
2012/09/20 Javascript
jquery序列化方法实例分析
2015/06/10 Javascript
JavaScript中的this关键字使用详解
2015/08/14 Javascript
jQuery封装的屏幕居中提示信息代码
2016/06/08 Javascript
详解AngularJS中$filter过滤器使用(自定义过滤器)
2017/02/04 Javascript
jQuery EasyUI ProgressBar进度条组件
2017/02/28 Javascript
vue项目中实现的微信分享功能示例
2019/01/21 Javascript
在Vue项目中取消ESLint代码检测的步骤讲解
2019/01/27 Javascript
layui 实现table翻页滚动条位置保持不变的例子
2019/09/05 Javascript
ES6函数和数组用法实例分析
2020/05/23 Javascript
python数据结构树和二叉树简介
2014/04/29 Python
一个小示例告诉你Python语言的优雅之处
2014/07/04 Python
Python fileinput模块使用介绍
2014/11/30 Python
Python 爬虫学习笔记之单线程爬虫
2016/09/21 Python
python批量从es取数据的方法(文档数超过10000)
2018/12/27 Python
Python实现简单层次聚类算法以及可视化
2019/03/18 Python
python中的协程深入理解
2019/06/10 Python
Window10下python3.7 安装与卸载教程图解
2019/09/30 Python
基于PyInstaller各参数的含义说明
2021/03/04 Python
英国独特的时尚和生活方式品牌:JOY
2018/03/17 全球购物
Michael Kors澳大利亚官网:世界知名的奢侈饰品和成衣设计师
2020/02/13 全球购物
荣耀商城:HIHONOR
2020/11/03 全球购物
企业面试题试卷附带答案
2015/12/20 面试题
Why we need EJB
2016/10/20 面试题
人事专员岗位职责说明书
2014/07/30 职场文书
正风肃纪查摆剖析材料
2014/10/10 职场文书
教师党员自我评议不足范文
2014/10/19 职场文书
新郎婚礼答谢词
2015/01/04 职场文书
学习保证书怎么写
2015/02/26 职场文书
2019年12月24日平安夜祝福语集锦
2019/12/24 职场文书