针对不同浏览器预览上传文件的处理方式

来源：互联网发布：物流软件系统编辑：程序博客网时间：2024/05/19 17:50

在学习过程中，发现在预览上传文件时，不同的浏览器会有不同的处理方式。

网页代码如下：

<img id="previewImg" src="images/preview.jpg" width="80px" height="80px">
<form action="" method="post" enctype="">
请选择图片：<input id="myfile" name="myfile" type="file"/>
</form>
<hr>
<body>
<h2>图片预览</h2>
<p><img id="largeImg" src="images/1.jpg" alt="Large Image"></p>
<p class="thumbs">
<a href="images/2.jpg" title="Image2"><img src="images/2.jpg"></a>
<a href="images/3.jpg" title="Image3"><img src="images/3.jpg"></a>
<a href="images/4.jpg" title="Image4"><img src="images/4.jpg"></a>
<a href="images/5.jpg" title="Image5"><img src="images/5.jpg"></a>
<a href="images/6.jpg" title="Image6"><img src="images/6.jpg"></a>
</p>
</body>

1、IE

IE是处理起来最简单的。

IE的input显示也是不同的。如下图：

IE是可以直接显示出文件路径的，但在google和360等浏览器是不能显示出来的。其他浏览器只能显示出图片名字，并且样式也是完全不同的。如下图：

在IE浏览器中，如下代码就可以实现预览功能。

$("#myfile").change(function(){
$("#previewImg").attr("src","file:///"+$("#myfile").val());
});

2、google、360浏览器

在以上浏览器中无法直接获得value的值，要使用如下代码进行预览。

$("#myfile").change(function() {
var file = this.files[0];
var reader = new FileReader();
reader.onload = function(){
var url = reader.result;
setImageURL(url);
};
reader.readAsDataURL(file);
});
var image = $("#previewImg")[0];
function setImageURL(url) {
image.src = url;
}

阅读全文

0 0