您的位置：首页 > Web前端 > JavaScript

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

2017-05-28 16:41 225 查看

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

首先，获取图片是很简单的，自然而然是要用到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>

详细大家都看得懂，不多说

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 前端

相关文章推荐

新的分享

章节导航