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

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

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

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

<code><</code><code>html</code> <code>xmlns</code><code>=</code><code>"http://www.w3.org/1999/xhtml"</code> <code>></code>

<code><</code><code>meta</code> <code>http-equiv</code><code>=</code><code>"Content-Type"</code> <code>content</code><code>=</code><code>"text/html; charset=utf-8"</code> <code>/> </code>

<code><</code><code>title</code><code>>本地图片预览</</code><code>title</code><code>> </code>

<code><</code><code>style</code> <code>type</code><code>=</code><code>"text/css"</code><code>></code>

<code>#preview{width:100px;height:100px;border:1px solid #000;overflow:hidden;}</code>

<code>#imghead {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);}</code>

<code></</code><code>style</code><code>></code>

<code><</code><code>script</code> <code>type</code><code>=</code><code>"text/javascript"</code><code>></code>

<code>function previewImage(file)</code>

<code> </code><code>var MAXWIDTH = 100;</code>

<code> </code><code>var MAXHEIGHT = 100;</code>

<code> </code><code>var div = document.getElementById('preview');</code>

<code> </code><code>if (file.files && file.files[0])</code>

<code> </code><code>div.innerHTML = '<</code><code>img</code> <code>id</code><code>=</code><code>imghead</code><code>>';</code>

<code> </code><code>var img = document.getElementById('imghead');</code>

<code> </code><code>img.onload = function(){</code>

<code> </code><code>var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);</code>

<code> </code><code>img.width = rect.width;</code>

<code> </code><code>img.height = rect.height;</code>

<code> </code><code>img.style.marginLeft = rect.left+'px';</code>

<code> </code><code>img.style.marginTop = rect.top+'px';</code>

<code> </code><code>var reader = new FileReader();</code>

<code> </code><code>reader.onload = function(evt){img.src = evt.target.result;}</code>

<code> </code><code>reader.readAsDataURL(file.files[0]);</code>

<code> </code><code>var sFilter='filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';</code>

<code> </code><code>file.select();</code>

<code> </code><code>var src = document.selection.createRange().text;</code>

<code> </code><code>div.innerHTML = '<</code><code>img</code> <code>id</code><code>=</code><code>imghead</code><code>>';</code>

<code> </code><code>var img = document.getElementById('imghead');</code>

<code> </code><code>img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;</code>

<code> </code><code>var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);</code>

<code> </code><code>status =('rect:'+rect.top+','+rect.left+','+rect.width+','+rect.height);</code>

<code> </code><code>div.innerHTML = "<</code><code>div</code> <code>id</code><code>=</code><code>divhead</code> <code>style</code><code>=</code><code>'width:"+rect.width+"px;height:"+rect.height+"px;margin-top:"+rect.top+"px;margin-left:"+rect.left+"px;"+sFilter+src+"\"'</code><code>></</code><code>div</code><code>>";</code>

<code>function clacImgZoomParam( maxWidth, maxHeight, width, height ){</code>

<code> </code><code>var param = {top:0, left:0, width:width, height:height};</code>

<code> </code><code>if( width>maxWidth || height>maxHeight )</code>

<code> </code><code>rateWidth = width / maxWidth;</code>

<code> </code><code>rateHeight = height / maxHeight;</code>

<code> </code><code>if( rateWidth > rateHeight )</code>

<code> </code><code>param.width = maxWidth;</code>

<code> </code><code>param.height = Math.round(height / rateWidth);</code>

<code> </code><code>param.width = Math.round(width / rateHeight);</code>

<code> </code><code>param.height = maxHeight;</code>

<code> </code><code>param.left = Math.round((maxWidth - param.width) / 2);</code>

<code> </code><code>param.top = Math.round((maxHeight - param.height) / 2);</code>

<code> </code><code>return param;</code>

<code></</code><code>script</code><code>> </code>

<code><</code><code>div</code> <code>id</code><code>=</code><code>"preview"</code><code>></code>

<code> </code><code><</code><code>img</code> <code>id</code><code>=</code><code>"imghead"</code> <code>width</code><code>=</code><code>100</code> <code>height</code><code>=</code><code>100</code> <code>border</code><code>=</code><code>0</code> <code>src</code><code>=</code><code>'../images/head01_big.jpg'</code><code>></code>

<code> </code><code><</code><code>input</code> <code>type</code><code>=</code><code>"file"</code> <code>onchange</code><code>=</code><code>"previewImage(this)"</code> <code>/> </code>

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

本文转自 iampomelo 51CTO博客，原文链接：http://blog.51cto.com/iampomelo/1652928，如需转载请自行联系原作者

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

继续阅读

使用RAP2和Mock.JS实现Web API接口的数据模拟和测试

从博客园迁移到简书平台

基于EasyUI的Web应用程序及过去一年的总结

玩转Tornado框架Tornado简介Tornado与Django的比较使用TornadoTornado的执行流程快速开始Tornado路由系统模板引擎静态缓存公共组件XSS跨站脚本攻击与CSRF跨域伪造请求Cookie与Session文件上传

【异常处理】org.hibernate.LazyInitializationException: could not initialize proxy - no Session

Django web 框架学习之旅（3）《Django Web 框架》

荷小鱼 x mPaaS | 借助 H5 容器改善 App 白屏、浏览器兼容问题

AI驱动的Web App开发实战

pager-taglib使用指南

django-web开发框架-视图-04视图URLconf

django-web开发框架-模板-05使用模板去除模板的硬编码Render简写总结

Django web框架学习之旅（4）《Django Web 框架》

django-web开发框架简介-01主要知识点介绍创建虚拟环境（Ubuntu）安装django创建项目目录说明

mPaaS 月度小报 | 3月发生的大事件

Android WebView 致安卓应用闪退，mPaaS 助你规避这波 Bug

解读 WebRTC 音频 NetEQ 及优化实践为什么要 “白话” NetEQ?丢包、抖动和优化的理解NetEQ 及相关模块NetEQ 内部模块NetEQ 相关模块优化点总结