解决chrome和firefox中文件上传本地路径隐藏的问题
2015-05-19 19:26
483 查看
如果想上传一张图片,在页面中实现预览,可以获取文件的上传路径,然后在一个<img/>里面显示,文件的上传路径就是<input type="file"/>的value。在IE下是value是等于本地路径的,然而,在chrome和firefox中,出于安全考虑,路径却是匿名,比如,上传E盘中的readme.txt,得到的value却是C:/fakepath/readme.txt。
要在页面显示上传的图片,可以先上传到服务器,然后再下载下来回避这个问题,但这样会有多余的流量,不是好的做法。
好在我找到了解决的办法:
要在页面显示上传的图片,可以先上传到服务器,然后再下载下来回避这个问题,但这样会有多余的流量,不是好的做法。
好在我找到了解决的办法:
<!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属性即可获得文件内容。
相关文章推荐
- 解决IE8上传文件时javascript取文件的本地路径的问题C:\fakepath\..
- IE8上传文件时获取文件本地路径问题(C:\fakepath\……)的解决办法
- IE8上传文件时获取文件本地路径问题(C:\fakepath\……)的解决办法
- 解决IE8上传文件时javascript取文件的本地路径的问题C:\fakepath\..
- IE8上传文件时获取文件本地路径问题(C:\fakepath\……)的解决办法
- uploadify在ie,chrome等浏览器上传文件成功,而firefox出现http error 404问题的解决方法
- Selenium自动化,上传文件获取本地路径的问题
- IE浏览器上传文件时本地路径变成”C:\fakepath\”的问题
- IE8上传文件时文件本地路径变成"C:\fakepath\"的问题
- IE浏览器上传文件时本地路径变成”C:\fakepath\”的问题
- opencms自定义html编辑器,不能切换路径,上传本地文件或选择文件的解决办法?
- file上传按钮替换以及解决IE浏览器隐藏file按钮不能上传文件问题
- 解决从本地文件系统上传到HDFS时的权限问题
- 解决从本地文件系统上传到HDFS时的权限问题
- IE浏览器上传文件时本地路径变成”C:\fakepath\”的问题
- 解决文件上传取不到真实路径问题(fakepath)
- 后台使用Spring MVC 4.15 版本 通过 ajaxFileUpload plugin插件上传文件相应时引起的一个小问题,Chrome、Firefox中出现SyntaxError:unexpected token <
- chrome 文件上传路径问题
- IE8上传文件时文件本地路径变成"C:\fakepath\"的问题
- js判断上传文件的大小,及确认文件是否在本地存在,兼容firefox、chrome、ie等浏览器