页面如何通过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="">- 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 给我们真的提供的不少便利的东西,善用里面的属性和方法会给我们的开发带来很多的便利。
网友评论