页面如何通过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获取不到，又不让我改浏览器，那到底怎么办呢？

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

1. 通过ajax传值到后台，后台获取数据后拿到文件名，然后将图片放到一个新的路径下，将路径返回给我们的JS，再利用JS来操作DOM让图片显示出来（这里我们用php来举个例子）
2. 利用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="">
  

  • JS

    // 获取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 给我们真的提供的不少便利的东西,善用里面的属性和方法会给我们的开发带来很多的便利。