在学习过程中，发现在预览上传文件时，不同的浏览器会有不同的处理方式。
网页代码如下：
<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;
}
595
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
