关于浏览器如何在页面上显示准备上传的图片的问题

2016-11-04 本文已影响1110人 Magician_Shiro

页面如何通过input标签来显示获取的图片?

之所想到这个问题是因为某次做动画的时候，需要获取transform-origin的值，普通的left,right,center,top和bottom已经满足不了需求，就想到了将图片显示出来，获取点击的地方占图片的百分比来找到变形的中心点

有了这个想法之后，大致的步骤就出来了

首先在html中写一个<input type =" file"/> 的标签
然后在html中写一个img标签
在JS中获取input的dom元素，通过value值来获取路径
将路径放在img的src属性中

那么问题来了，真的能通过value的值来获取到路径吗？

答案是否定的，不然问题也就迎刃而解了不是吗？

这里我们不得不提到一个问题，那就是浏览器基于保护用户的相关安全措施，将真实路径隐藏了起来，而使用时 fakepath+文件名的形式来代替这个真实的路径。

这里然我们来看个动图来看看到底是个什么鬼

getFilePath.gif

我们能在动图中看到我上传的图片明明是 D盘=》图片=》p站这个目录下，最后console.log()出来的结果居然是 C:\fakepath\58649812_p1_master1200.jpg

什么鬼？为什么会这样？

其实我们打印出来的值，正是浏览器的保护用户的相关措施，具体情况我也不甚了解，但是我发现了一个惊天大秘密。我的IE居然可以通过这个方法获取到图片。并且我测试了IE8,9,10,11。都是可以拿到值的。

难道修改浏览器的某些配置就能获取到了吗？

根据我的推测，应该是可以拿到值的，但是遨游在英特网的海洋的中，谁会嫌安全措施多了呢？既然浏览器为了用户安全，给你禁止了一些功能，自然是为了让用户能够在一个相对安全的网络环境中遨游嘛。也许你不知道这些安全措施有多重要，这里小提到一个跨域问题，后面我会谈到一个解除浏览器的跨域限制，来让大家看看安全措施的重要性。

那么问题又来了，既然input获取不到，又不让我改浏览器，那到底怎么办呢？

这里我们用到两种方式来解决这个问题

通过ajax传值到后台，后台获取数据后拿到文件名，然后将图片放到一个新的路径下，将路径返回给我们的JS，再利用JS来操作DOM让图片显示出来（这里我们用php来举个例子）
利用H5中的FileReader()对象

在具体怎么实现之前，让我们来看看我们从本地拿进来的图片到底在input的哪里

input的这个dom元素到底有什么.gif

我们可以看到input这个对象下面的files属性下面有我们想要的文件名，文件格式。

既然已经拿到了我们想要的东西，那么就开工了。

通过ajax加上后台来实现让页面上显示图片

HTML部分

  <input type="file" >
  <br />
  <img src="" alt="">

JS部分

      // 获取input的dom元素
      var inputObj = document.querySelector('input');
      // 获取img的dom元素
      var imgObj = document.querySelector('img');
      // 监听input的改变
      inputObj.onchange = function(){
          // 拿到文件的信息
          var pic = inputObj.files[0];

          // 创建一个formData对象
          var formData = new FormData();
          // 将文件信息存入这个对象中
          formData.append('file',pic);

          // 创建异步对象
          var xhr = new XMLHttpRequest();

          // 设置method和url 
          xhr.open('post','getFilePath.php');

          // 发送请求,将formData这个对象传递
          xhr.send(formData);

          // 监听状态
          xhr.onreadystatechange = function(){
              // 如果请求已完成，并且成功找到网页，就拿到路径值使用
              if(xhr.readyState == 4 && xhr.status == 200){
                  // 获取返回值
                  var src = xhr.responseText;
                  // 改变img标签的src值
                  imgObj.src=src;
              }
          };

      };

php部分

  // 获取文件名
  $fileName = $_FILES['file']['name'];
  // 获取暂存的路径
  $tempPath = $_FILES['file']['tmp_name'];
  // 定义将要保存的路径 ，你要保证你当前文件下有images这个文件夹
  $savePath = 'images/'.$fileName;

  // 将图片移动到指定位置
  move_uploaded_file($tempPath, $savePath);
  // 返回路径
  echo $savePath;

我去，就为了显示张图片而已，还得需要后台来配合，太麻烦了。真有种杀猪用了牛刀的感觉。想想就觉得不爽。所以这里推荐使用FileReader()来实现功能

通过FileReader()对象来让页面显示图片

HTML

  <input type="file" name="">
  <br />
  <img src="" alt="">

  // 获取input的dom元素
      var inputObj = document.querySelector('input');
      // 获取img的dom元素
      var imgObj = document.querySelector('img');
      // 监听input发生改变
      inputObj.onchange = function(){
          // 获取上传的文件信息
          var pic = inputObj.files[0];

          // 创建FileReader对象
          var reader = new FileReader();

          // 编码成Data URL (这一步最为关键)
          reader.readAsDataURL(pic);

          // 监听上传完成
          reader.onload = function(){
              // 拿到base64的路径
              var src = reader.result;
              // 改变img的src属性值
              imgObj.src=src;
          }

      };

这样一比较，代码是不是少了很多？根本不需要什么后台和ajax，就能让图片显示。
这完全可以用在你要上传图片的时候，让图片预先在页面上预览，然后再一次性提交给后台。

结语

首先想说的是第一次用markdown写东西。并不是很会用。所以写的排版方面很是奇怪。只是希望看到人不要打我。。。。
然后我还在前端这个泥坑里面摸爬滚打，所以写的东西有很多不足的地方，如果有什么错误的地方，还望见谅。
最后想说的是 H5 给我们真的提供的不少便利的东西,善用里面的属性和方法会给我们的开发带来很多的便利。