您的位置: 首页  >  文章  >  实时显示从file输入框中打开的图片C:\fakepath问题

实时显示从file输入框中打开的图片C:\fakepath问题

分类: 文章 • 2024-11-01 15:35:16

一、问题产生原因

1、今天维护公司项目，需要修改一个上传图片显示的问题，就是实时显示一个从file input上传的图片问题，以下是demo：

[html] view plain copy
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>Document</title>  
  6.     <script type="text/javascript" src="jquery-1.11.1.js"></script>  
  7. </head>  
  8. <body>  
  9.     <input id="inFile" type="file">  
  10.     <img src="" alt="1111">  
  11. </body>  
  12. </html>  
[javascript] view plain copy
  1. <script>  
  2. $(function(){  
  3.     $("#inFile").on("change",function () {  
  4.         $("img").attr("src",$(this).val());  
  5.     });  
  6. });  


这就是控制台的显示，预想的图片并没有显示出来，路径也变成了C:\fakepath\1.png
实时显示从file输入框中打开的图片C:\fakepath问题

二、解决方案

搜了一堆解决方案，针对浏览器各种搞，然而没用。最后从黄者之风博客上找到了有用的解决方案。

[javascript] view plain copy
  1. <script>  
  2. $(function(){  
  3.     $("#inFile").on("change",function () {  
  4.         var $file = $(this);  
  5.         var fileObj = $file[0];  
  6.   
  7.         var windowURL = window.URL || window.webkitURL;  
  8.         var dataURL;  
  9.         var $img = $("img");  
  10.   
  11.         if (fileObj && fileObj.files && fileObj.files[0]) {  
  12.             dataURL = windowURL.createObjectURL(fileObj.files[0]);  
  13.             $img.attr('src', dataURL);  
  14.         } else {  
  15.             dataURL = $file.val();  
  16.             var imgObj = document.getElementById("preview");  
  17.             imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";  
  18.             imgObj.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = dataURL;  
  19.   
  20.         }  
  21.     });  
  22. });  

亲测在IE、Chrome、Firefox、edge均可以正常展示图片，以下是Chrome展示，虽然显示的地址依然不是理想的，但是图片能显示就OK。

实时显示从file输入框中打开的图片C:\fakepath问题

版权声明：向码农和极客致敬。 http://blog.****.net/gezi2015129/article/details/71125125

一、问题产生原因

1、今天维护公司项目，需要修改一个上传图片显示的问题，就是实时显示一个从file input上传的图片问题，以下是demo：

[html] view plain copy
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>Document</title>  
  6.     <script type="text/javascript" src="jquery-1.11.1.js"></script>  
  7. </head>  
  8. <body>  
  9.     <input id="inFile" type="file">  
  10.     <img src="" alt="1111">  
  11. </body>  
  12. </html>  
[javascript] view plain copy
  1. <script>  
  2. $(function(){  
  3.     $("#inFile").on("change",function () {  
  4.         $("img").attr("src",$(this).val());  
  5.     });  
  6. });  


这就是控制台的显示，预想的图片并没有显示出来，路径也变成了C:\fakepath\1.png
实时显示从file输入框中打开的图片C:\fakepath问题

二、解决方案

搜了一堆解决方案，针对浏览器各种搞，然而没用。最后从黄者之风博客上找到了有用的解决方案。

[javascript] view plain copy
  1. <script>  
  2. $(function(){  
  3.     $("#inFile").on("change",function () {  
  4.         var $file = $(this);  
  5.         var fileObj = $file[0];  
  6.   
  7.         var windowURL = window.URL || window.webkitURL;  
  8.         var dataURL;  
  9.         var $img = $("img");  
  10.   
  11.         if (fileObj && fileObj.files && fileObj.files[0]) {  
  12.             dataURL = windowURL.createObjectURL(fileObj.files[0]);  
  13.             $img.attr('src', dataURL);  
  14.         } else {  
  15.             dataURL = $file.val();  
  16.             var imgObj = document.getElementById("preview");  
  17.             imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";  
  18.             imgObj.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = dataURL;  
  19.   
  20.         }  
  21.     });  
  22. });  

亲测在IE、Chrome、Firefox、edge均可以正常展示图片，以下是Chrome展示，虽然显示的地址依然不是理想的，但是图片能显示就OK。

实时显示从file输入框中打开的图片C:\fakepath问题

相关推荐