解决chrome和firefox中文件上传本地路径隐藏的问题

简介:

  如果想上传一张图片,在页面中实现预览,可以获取文件的上传路径,然后在一个<img/>里面显示,文件的上传路径就是<input type="file"/>的value。在IE下是value是等于本地路径的,然而,在chrome和firefox中,出于安全考虑,路径却是匿名,比如,上传E盘中的readme.txt,得到的value却是C:/fakepath/readme.txt。

  要在页面显示上传的图片,可以先上传到服务器,然后再下载下来回避这个问题,但这样会有多余的流量,不是好的做法。

  好在我找到了解决的办法:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
< html  xmlns = "http://www.w3.org/1999/xhtml"  >
< head >     
< meta  http-equiv = "Content-Type"  content = "text/html; charset=utf-8"  />     
< title >本地图片预览</ title >     
< style  type = "text/css" >
#preview{width:100px;height:100px;border:1px solid #000;overflow:hidden;}
#imghead {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);}
</ style >
< script  type = "text/javascript" >
function previewImage(file)
{
   var MAXWIDTH  = 100;
   var MAXHEIGHT = 100;
   var div = document.getElementById('preview');
   if (file.files && file.files[0])
   {
       div.innerHTML = '< img  id = imghead >';
       var img = document.getElementById('imghead');
       img.onload = function(){
         var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
         img.width = rect.width;
         img.height = rect.height;
         img.style.marginLeft = rect.left+'px';
         img.style.marginTop = rect.top+'px';
       }
       var reader = new FileReader();
       reader.onload = function(evt){img.src = evt.target.result;}
       reader.readAsDataURL(file.files[0]);
   }
   else
   {
     var sFilter='filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';
     file.select();
     var src = document.selection.createRange().text;
     div.innerHTML = '< img  id = imghead >';
     var img = document.getElementById('imghead');
     img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;
     var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
     status =('rect:'+rect.top+','+rect.left+','+rect.width+','+rect.height);
     div.innerHTML = "< div  id = divhead  style = 'width:"+rect.width+"px;height:"+rect.height+"px;margin-top:"+rect.top+"px;margin-left:"+rect.left+"px;"+sFilter+src+"\"' ></ div >";
   }
}
function clacImgZoomParam( maxWidth, maxHeight, width, height ){
     var param = {top:0, left:0, width:width, height:height};
     if( width>maxWidth || height>maxHeight )
     {
         rateWidth = width / maxWidth;
         rateHeight = height / maxHeight;
         
         if( rateWidth > rateHeight )
         {
             param.width =  maxWidth;
             param.height = Math.round(height / rateWidth);
         }else
         {
             param.width = Math.round(width / rateHeight);
             param.height = maxHeight;
         }
     }
     
     param.left = Math.round((maxWidth - param.width) / 2);
     param.top = Math.round((maxHeight - param.height) / 2);
     return param;
}
</ script >     
</ head >     
< body >
< div  id = "preview" >
     < img  id = "imghead"  width = 100  height = 100  border = 0  src = '../images/head01_big.jpg' >
</ div >
     < br />     
     < input  type = "file"  onchange = "previewImage(this)"  />     
</ body >     
</ html >

  调用FileReader的readAsDataURL接口,将启动异步加载文件内容,通过给reader监听一个onload事件,将数据加载完毕后,在onload事件处理中,通过reader的result属性即可获得文件内容。











本文转自 iampomelo 51CTO博客,原文链接:http://blog.51cto.com/iampomelo/1652928,如需转载请自行联系原作者
目录
相关文章
|
11月前
|
Web App开发 JavaScript
JS 获取当前浏览器类型(IE、Chrome、Edge、Firefox、Opera、UC、QQ)
JS 获取当前浏览器类型(IE、Chrome、Edge、Firefox、Opera、UC、QQ)
954 0
|
Web App开发 前端开发
区分IE6,IE7,IE8,IE9,FireFox,Chrome浏览器的CSS hack
区分IE6,IE7,IE8,IE9,FireFox,Chrome浏览器的CSS hack
|
Web App开发 缓存 网络协议
chrome谷歌浏览器&firefox火狐清除dns缓存的办法
chrome谷歌浏览器&firefox火狐清除dns缓存的办法
478 0
chrome谷歌浏览器&firefox火狐清除dns缓存的办法
|
Web App开发 安全
接口框架中WebDriver启动IE、Firefox和Chrome浏览器
接口框架中WebDriver启动IE、Firefox和Chrome浏览器
接口框架中WebDriver启动IE、Firefox和Chrome浏览器
|
Web App开发 数据采集 Python
通过爬虫中的selenium控制chrome,Firefox等浏览器自动操作获取相关信息
在pycharm中导入selenium之后,我们需要通过命令行来进行操作浏览器
通过爬虫中的selenium控制chrome,Firefox等浏览器自动操作获取相关信息
|
Web App开发 JSON 小程序
如何在谷歌chrome、Firefox等浏览器打开、编辑、保存微软Office、金山WPS文档?
在2015年的主流浏览器版本中,因为可以直接调用微软开源的 ActiveX控件,可以实现微软Office软件的在线编辑及审阅功能,但是从2015年开始,各大主流浏览器先后取消了对 NPAPI插件,导致在线编辑Office软件成为了一个难题。虽然后来有商业公司开发的相关控件,但是还是无法 克服ActiveX控件固有的缺陷,不仅限制了浏览器的版本,还需要用户单独设置浏览器安全设置,导致用户体验极差。
517 0
如何在谷歌chrome、Firefox等浏览器打开、编辑、保存微软Office、金山WPS文档?
|
Web App开发 编解码 监控
海康威视、浙江大华RTSP在Chrome、Firefox等浏览器低延迟(300ms)播放解决方案
在遍地都是摄像头的今天,往往需要在各种B/S信息化系统中集成视频播放功能,海康、大华、华为等大厂摄像头遵循监控行业标准,一般只支持RTSP传输协议,而Chrome、Firefox、Edge等现代浏览器的主流版本并不支持RTSP流的直接原生播放!
778 0
海康威视、浙江大华RTSP在Chrome、Firefox等浏览器低延迟(300ms)播放解决方案
|
Web App开发 编解码 移动开发
Chrome、Firefox等浏览器低延迟(300ms)播放海康威视、浙江大华RTSP解决方案
随着网络宽带的不断提升和智能手机的流行,RTSP实时视频流播放及处理不再局限于安防行业。在如道路、工厂、楼宇、学校、港口、农场、景区等诸多场景实施的信息化系统中,绝大多数都采用的是B/S架构,隐藏迫切需要在浏览器中嵌入多路摄像头RTSP流低延迟(小于500毫秒)播放功能
1118 0
|
Web App开发 缓存 安全
怎么在Chrome和Firefox浏览器中清除HSTS设置?
HSTS代表的是HTTPS严格传输安全协议,它是一个网络安全政策机制,能够强迫浏览器只通过安全的HTTPS连接(永远不能通过HTTP)与网站交互。
4208 0