编程 Javascript

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>

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

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

- Author -

啊宏ahong

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

javascript 字符串连接的性能问题(多浏览器)

Nov 18 Javascript

超链接的禁用属性Disabled使用示例

Jul 31 Javascript

node.js中的events.emitter.removeAllListeners方法使用说明

Dec 10 Javascript

jQuery中unwrap()方法用法实例

Jan 16 Javascript

javascript 秒表计时器实现代码

Mar 09 Javascript

JavaScript正则表达式和级联效果

Sep 14 Javascript

原生JS写Ajax的请求函数功能

Dec 22 Javascript

JS实现数组简单去重及数组根据对象中的元素去重操作示例

Jan 05 Javascript

解决LayUI表单获取不到data的问题

Aug 20 Javascript

微信小程序发送短信验证码完整实例

Jan 07 Javascript

JavaScript 实现HTML DOM增删改查操作的常见方法详解

Jan 04 Javascript

解决vue+ element ui 表单验证有值但验证失败问题

Jan 16 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