javascript：操作input返回的图像文件

最新推荐文章于 2022-12-09 15:31:06 发布

mkmin

最新推荐文章于 2022-12-09 15:31:06 发布

阅读量794

点赞数

分类专栏：前端文章标签：前端

本文链接：https://blog.csdn.net/HUSHILIN001/article/details/72793640

版权

前端专栏收录该内容

19 篇文章 1 订阅

订阅专栏

最近在看一些代码，发现自己很多的不足，所以就写上这么一篇博客，来记录下怎么去操作图片

首先，获取图片是很简单的，自然而然是要用到input标签，是的，这是我们上传图片的时候最常用到的

其次我们要用到filereader来读取图片，这时候。我们还要判断下他的类别。比如是不是图片之类的，最后实现我们的业务代码。

<!DOCTYPE html>
<html>

   <head>
       <meta charset="UTF-8">
       <title></title>
       <style>
           *{
               margin:0;
               padding: 0;
               border: 0;
               font-size: 16px;
           }
           input {
               width: 300px;
               height: 100px;
           }
       </style>
   </head>

   <body>
       <input type="file" />
       <script type="text/javascript" src="lib/exif.js"></script>
       <script type="text/javascript" src="lib/jquery-2.1.1.min.js"></script>
       <script>
           var file;
           var patt1 = new RegExp(/image\/\w+/);
           //添加点击事件
           $("input").bind("change", function(e) {
               console.log(e);
               //判定是否支持filereader
               if(typeof FileReader == "function") {
                   console.log("true");
                   file = this.files[0];
                   //判断文件类别
                   if(file == undefined) {
                       console.log("aaaa");
                   } else {
                       var string = file.type;
                       // ==========
                       // = 解析文件，获取文件流，显示出来 =
                       // ==========
                       if(patt1.test(string) == true) {
                           var reader = new FileReader();
                           reader.readAsDataURL(file);
                           reader.onload = function() {
                               $("body").append("<img id='image' src=" + this.result + " />");
                               $("body").append("<div>" + this.result.length + "</div>");
                               //使用file或则是使用this。result来获取你所要的信息
                               console.log(file);
                               //                               EXIF.getData($("img"), function() {
                               //                                   EXIF.getAllTags(this);
                               //                                   console.log(EXIF.getTag(this, 'Orientation'));
                               //                               });
                               var t = file;
                               for(i in t) {
                                   $("body").append("<div>" + i +"----"+ t[i]+ "</div>");

                               }
                           }
                       } else {

                       }
                   }
               }

           });
       </script>
   </body>

</html>