input类型为file时,博客园,chrome,FF和IE8的fakepath题目处理惩罚办法

determining-the-users-location.zip

在处理惩罚表单的时辰,若是input类型为file时,FF,chrome,IE8获取文件时获取到一个fakepath,而不是真正的文件地址;不过ie6,ie7却可以获取,在IE8之后,安然级别进步了。然则,当呈现一个客户端预览如许的需求的时辰,对于不合浏览器就要采取不消的策略了;IE可以应用滤镜,chrome等可以应用HTML5的体式格式,ie8 input,具体如下: 
<img id="file_img"  src="http://www.09687.com/tourl/op/xx" width="100" height="100"/> 
<script type="text/javascript"> 
var getPath=function(obj){ 
obj.(); 
            var path=document.ion.createRange().text; 
obj.removeAttribute("src"); 
obj.style.filter=   
            "alpha(opacity=0);progid:DXImageTransform.Microsoft.AlphaImageLoader(src="""+path+""", sizingMethod=""scale"");";  

</script> 
如许,经由过程滤镜的体式格式获得path,fakepath,不过,应用滤镜时,的左上角会呈现一个小图标,这时,我们可以绕弯的用一个透明作为file_img的src,占用这个src,ie8 input,使得小被显示为透明; 
对于FF,网上有一种撒播好久的应用getAsDataURL办法来获取的办法,fakepath,比如: 
function getFullPath(obj){ 
    if(obj){ 
        if (window.navigator.userAgent.indexOf("MSIE")>=1){ 
            obj.(); 
            return document.ion.createRange().text; 
        } 
        else if(window.navigator.userAgent.indexOf("Firefox")>=1){ 
            if(obj.files){ 
return obj.files.item(0).getAsDataURL(); 

            return obj.value; 
        } 
return obj.value; 
    } 

不过,我们可以应用html5的办法来兼容FF,HTML5 File API中定义了一个BlobReader,经由过程它可以应用各类不合的体式格式读入文件并且可以和处理惩罚读取文件过程中的各个状况。不过在Firefox与Chrome的实现中,并没有如许一个BlobReader,取而代之的是FileReader,拥有与BlobReader雷同的办法和事务。 
比如: 
function getPath(obj,fileQuery){ 
var file =fileQuery.files[0];  
var reader = new FileReader();  
reader.onload = function(e){ 
obj.setAttribute("src",e.target.result) 

reader.readAsDataURL(file);  

chrome的解决办法也和FF的一样,应用FileReader对象来实现,fakepath,接下来,我们须要一个完全兼容的版本; 
/*fileQuery是指input type为file的对象,在事务中应用this来调换,fakepath, 
比如:obj.onChange=function(){ 
var file_img=document.getElementById("img"); 
getPath(file_img,this,transImg); 

transImg是解决IE左上角图标的那张透明的路径;*/ 
var getPath=function(obj,fileQuery,transImg){ 
if(window.navigator.userAgent.indexOf("MSIE")>=1){ 
obj.(); 
var path=document.ion.createRange().text; 
obj.removeAttribute("src"); 
obj.setAttribute("src",transImg); 
obj.style.filter=   
"progid:DXImageTransform.Microsoft.AlphaImageLoader(src="""+path+""", sizingMethod=""scale"");";  

else{ 
var file =fileQuery.files[0];  
var reader = new FileReader();  
reader.onload = function(e){ 
obj.setAttribute("src",e.target.result) 

reader.readAsDataURL(file);  


当然,也许我们始终感觉用JS的办很烦躁,fakepath,那么可以应用以下2种作为调换规划 1,falsh办法,采取falsh办法也斗劲稳当,ie8 input,没有兼容的纷扰;2,进步前辈办事器,然后再从办事器读取出来; 
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值