基于JavaScript实现本地图片预览

本文实例为大家分享了js本地图片预览的具体代码，供大家参考，具体内容如下

<!DOCTYPE html>
<!--
<!DOCTYPE html>一定要放在第一行,除非上面都是空行

在HTML规范中,单独存在的标签是不需要使用/来自我关闭的,比如<br>,<input>,<hr>等等这样的标签都是符合语法的.
在XHTML规范中,单独存在的标签要按照XML的语法规则进行自我关闭,上面三个标签就应写成<br />,<input />,<hr />
-->
<html>
  <head>
    <meta charset="utf8">
    <style>
      input[type=radio] {
        /* 按钮与文字对齐 */
        vertical-align:middle;
      }
      input[type=file] {
        display: block;
      }
      #img {
        width: 200px;
        height: 200px;
        border: 1px solid black;
        margin-top: 10px;
      }
    </style>
  </head>
  <body>
    <input type="radio" name="previewType" value="fileReader" onChange="onPreviewTypeChange()">fileReader
    <input type="radio" name="previewType" value="createURL" onChange="onPreviewTypeChange()">createURL
    <hr>
    <input type="file" id="imgFile" onChange="imgChange()" value="test.jpg">
    <img id="img">
    <script>
      var previewTypes = document.getElementsByName("previewType");
      var imgFile = document.getElementById("imgFile");
      var img = document.getElementById("img");

      function getPreviewType() {
        for(var i=0; i<previewTypes.length; i++) {
          if(previewTypes[i].checked) {
            return previewTypes[i].value;
          }
        }
      }

      function onPreviewTypeChange() {
        imgChange(event.target.value);
      }

      function imgChange(type) {
        img.src = "";
        var files = imgFile.files;
        console.log(files);
        if(!files || files.length === 0) {
          return;
        }
        var file = files[0];
        if(!type) {
          type = getPreviewType();
          if(!type) {
            return;
          }
        }
        switch(type) {
          case "fileReader":
            var fr = new FileReader();
            fr.onload = function(progressEvent) {
              console.log(progressEvent);
              img.src = progressEvent.target.result;
            }
            fr.readAsDataURL(file);
            break;
          case "createURL":
            img.onload = function() {
              //释放一个之前通过调用 URL.createObjectURL() 创建的已经存在的 URL 对象。
              URL.revokeObjectURL(img.src);
            }
            img.src = URL.createObjectURL(file);
            break;
        }
      }
    </script>
  </body>
</html>

fileReader.readAsDataURL

URL.createObjectURL

可以看出URL实质上是以“blob:”打头的，后面跟着32位的UUID（8-4-4-4-12）的结构。

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

赞 (0)

相关推荐

  • JS预览图像将本地图片显示到浏览器上

    复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script type="text/javascript"&

  • js本地图片预览实现代码

    本文实例为大家分享了js本地图片预览实例,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <title></title> </head> <body> <div id="divPreview"> <img id="imgHeadPhoto" src="noperson.jpg" style="wid

  • 纯JS实现本地图片预览的方法

    本文实例讲述了纯JS实现本地图片预览的方法.分享给大家供大家参考.具体如下: 刚突然看到,网上已经有很多类似的代码,但没找到一个合适的.就拿自己以前写的写了一个.代码比较简洁,引用了一个我之前写的js.方法可以单独剥离出来使用,未测太多兼容.本机浏览器基本都支持(IE,FF,Chrome) index.html如下: <html> <head> <title>Test</title> <script type="text/javascript

  • javascript firefox不显示本地预览图片问题的解决方法

    复制代码 代码如下: <img id="img1" src=""/> <script> function fileChange(obj) { var url = obj.value url = "file:///" + url.replace("\\",'/'); alert(url); document.getElementById("img1").src= url; } <

  • javascript IE7 浏览器本地图片预览

    说明: 在对象容器边界内,在对象的背景和内容之间显示一张图片.并提供对此图片的剪切和改变尺寸的操作.如果载入的是PNG(Portable Network Graphics)格式,则0%-100%的透明度也被提供. 语法: filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL ) enabled:可选项.布尔值(Boolean).设

  • 详解nodejs实现本地上传图片并预览功能（express4.0+）

    详解nodejs实现本地上传图片并预览功能（express4.0+）

    Express为:4.13.1  multyparty: 4.1.2 代码主要实现本地图片上传到nodejs服务器的文件下,通过取图片路径进行图片预览 写在前面:计划实现图片上传预览功能,但是本地图片上传所获得路径为 C:\fakepath\"+文件名的形式,得不到文件真实路径,所以无法直接预览,于是采用将图片上传至服务器,传回服务器路径,实现预览.前端采用通过ajax方式上传文件,使用FormData进行ajax请求  ,nodejs端采用multiparty模块 相关查看文档: 通过Ajax

  • 在页面预览客户端本地图片的js代码(兼容FF IE)

    公司最近有个项目有这样的需求我才发现我之前写的 如何通过JS获取用户本地图片路径 这篇文章里所使用的方法只支持本地页面预览本地图片 有一种解决方法是上传到服务器后返回相对路径 但是效率是个问题,编程复杂度也会提高 直接上demo代码 为更多有这种需求又苦于找不到解决方案的同行提供源码 转载请注明出处 我这里还有更多的其他问题的解决方案供更多人参考 get file input full path function getFullPath(obj) { var newPreview = docum

  • Javascript图片上传前的本地预览实例

    图片的上传预览功能主要用于图片上传前的一个效果的预览,目前主流的方法主要有js,jquery与flash实现,但我们一般都会使用js来实现图片上传预览功能,下面来看一个例子. 原理: 分为两步:当上传图片的input被触发并选择本地图片之后获取要上传的图片这个对象的URL(对象URL):把对象URL赋值给事先写好的img标签的src属性即可把图片显示出来. 在这里,我们需要了解Javascript里File对象.Blob对象和window.URL.createObjectURL()方法. Fil

  • 用js实现预览待上传的本地图片

    <form name="form5" id="form5" method="post" action="#"> <input type="file" name="file5" id="file5" onchange="preview5()"/> </form> <script type="text

  • 原生js FileReader对象实现图片上传本地预览效果

    原生js FileReader对象实现图片上传本地预览效果

    本文实例为大家分享了js实现图片上传本地预览效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta

  • JavaScript实现图片本地预览功能【不用上传至服务器】

    JavaScript实现图片本地预览功能【不用上传至服务器】

    本文实例讲述了JavaScript实现图片本地预览功能.分享给大家供大家参考,具体如下: 实现一个在file文件域中选定图片文件之后,马上进行预览.不用预上传到服务器,整缩略图再打回前端用Ajax去预览的.直接利用JavaScript即可以完成,而且还可以兼容IE6.具体效果,如下图所示: 具体实现是在非IE浏览器利用HTML5去显示,在IE浏览器则直接调用IE的滤镜功能去实现.具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tra

随机推荐