您的位置：首页 > 其它

图片上传本地显示，多浏览器兼容

2016-01-13 11:19 513 查看

经常遇到表单上传图片，使用原生 HTML 的 input file，通常都是把图片上传到服务器，返回图片地址，重新设置图片的src 。

其实不上传服务器也可以把图片显示出来的，这样可以减少对服务器的请求，并减少服务器端的垃圾图片。

具体做法，现在通过Html5 的 FileReader 接口就可以轻松实现，提到Html5 大家会问： “那个恶心的IE怎么做呢？” 其实IE可以通滤镜来实现的

IE6直接设置src 为图片地址就可以显示的。废话不多说了直接上代码。

<html>
<head>
<title></title>
<script src="Scripts/jquery-1.11.2.js"></script>
<style type="text/css">
img {width: 400px;height: 300px;}
form {position: absolute;top: -2000px;}
label {background-color: blue;padding: 6px 12px;color: #fff;}
</style>
</head>
<body>
<form method="POST" style="">
<input type="file" id="file" />
</form>
<img id="image" alt=""/>
<br/>
<br/>
<!-- 在这里用了lable控件，原始的file控件实在是太丑了 -->
<!-- 在IE 里如果用 click 模拟点击 file控件 提交表单时会报 无法访问的错误，所以在这里用了 for="file" 来避免 -->
<label for="file">提交</label>
<script>
$(function () {
$("#file").change(function () {
selectImg(this, "image", function () {
alert("处理完成");
});
});

function selectImg(file, imgId, readyCallback) {
///<summary>图片选择</summary>
///<param name="file" type="Object">input file 控件</param>
///<param name="imgId" type="string">img 控件id</param>
///<param name="readyCallback">处理成功后回调方法</param>

var isIe = navigator.userAgent.match(/MSIE/) != null;
var pic = document.getElementById(imgId);

if (isIe) {
var ext = file.value.substring(file.value.lastIndexOf(".") + 1).toLowerCase();
// gif在IE浏览器暂时无法显示
if (ext !== "png" && ext !== "jpg" && ext !== "jpeg") {
window.util.messager("警告", "图片的格式必须为png或者jpg或者jpeg格式!");
return;
}

file.select();
var path = document.selection.createRange().text;
var picWidth = pic.width;
if (picWidth > 0) {
pic.style.width = picWidth;
pic.style.height = pic.height;
}

var isIe6 = navigator.userAgent.match(/MSIE 6.0/) != null;
// IE6浏览器设置为本地路径
if (isIe6) {
pic.src = path;
} else {
// 非IE6版本可以通过滤镜来实现,sizingMethod 为 image 时显示原始图片，scale 自适应容器大小,可以根据需求设置
pic.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src=\"" + path + "\")";
// 设置img的src为base64编码的透明图片 取消浏览器默认图片
pic.src = "data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==";
}
if (typeof readyCallback === "function") readyCallback();
} else {
if (!file.files || !file.files[0]) return;
var reader = new FileReader();
reader.onload = function (evt) {
pic.src = evt.target.result;
if (typeof readyCallback === "function") readyCallback();
}
reader.readAsDataURL(file.files[0]);
}
}
});

</script>

</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航