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

2019-11-19 16:01:19

字体：大中小

来源：转载

供稿：网友

本文实例为大家分享了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原生轮播图的简单实现(推荐)

下一篇：JQuery和html+css实现带小圆点和左右按钮的轮播图实例