html5上传图片代码
2015年03月05日 14:59
0 点赞
0 评论
更新于 2025-11-21 16:43
本文将为你展示在IE9及以上浏览器中实现图片上传预览的代码。需要说明的是，项目仅要求支持IE9以上浏览器，所以未提供IE8的实现代码。不过，印象中IE8是利用了filter功能来实现相关效果的。
代码实现
以下是完整的HTML代码，包含了样式和JavaScript逻辑，用于实现图片上传和预览功能：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#kk {
width: 400px;
height: 400px;
overflow: hidden;
}
#preview_wrapper {
width: 300px;
height: 300px;
background-color: #CCC;
overflow: hidden;
}
#preview_fake {
/* 该对象用于在IE下显示预览图片 */
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);
width: 300px;
overflow: hidden;
}
#preview_size_fake {
/* 该对象只用来在IE下获得图片的原始尺寸，无其它用途 */
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);
width: 300px;
visibility: hidden;
overflow: hidden;
}
#preview {
/* 该对象用于在FF下显示预览图片 */
width: 300px;
height: 300px;
overflow: hidden;
}
</style>
</head>
<body>
<script type="text/javascript">
function onUploadImgChange(sender) {
// 检查文件格式
if (!sender.value.match(/.jpg|.gif|.png|.bmp/i)) {
alert('图片格式无效！');
return false;
}
var objPreview = document.getElementById('preview');
var objPreviewFake = document.getElementById('preview_fake');
var objPreviewSizeFake = document.getElementById('preview_size_fake');
if (sender.files && sender.files[0]) {
// Chrome和Firefox等现代浏览器的处理方式
objPreview.style.display = 'block';
objPreview.style.width = 'auto';
objPreview.style.height = 'auto';
// Firefox因安全性问题已无法直接通过 input[file].value 获取完整的文件路径
// 这里使用 FileReader API 来读取文件并转换为 DataURL
var reader = new FileReader();
reader.onload = function (e) {
objPreview.src = e.target.result;
};
reader.readAsDataURL(sender.files[0]);
} else if (objPreviewFake.filters) {
// IE7、IE8的处理方式
// IE7, IE8在设置本地图片地址为 img.src 时出现莫名其妙的后果
// （相同环境有时能显示，有时不显示），因此只能用滤镜来解决
// IE7, IE8因安全性问题已无法直接通过 input[file].value 获取完整的文件路径
sender.select();
sender.blur();
var imgSrc = document.selection.createRange().text;
objPreviewFake.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = imgSrc;
objPreviewSizeFake.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = imgSrc;
alert("已成功选择图片！");
alert(objPreviewSizeFake.offsetWidth);
autoSizePreview(objPreviewFake, objPreviewSizeFake.offsetWidth, objPreviewSizeFake.offsetHeight);
objPreview.style.display = 'none';
}
}
function onPreviewLoad(sender) {
autoSizePreview(sender, sender.offsetWidth, sender.offsetHeight);
}
function autoSizePreview(objPre, originalWidth, originalHeight) {
var zoomParam = clacImgZoomParam(300, 300, originalWidth, originalHeight);
objPre.style.width = zoomParam.width + 'px';
objPre.style.height = zoomParam.height + 'px';
objPre.style.marginTop = zoomParam.top + 'px';
objPre.style.marginLeft = zoomParam.left + 'px';
}
function clacImgZoomParam(maxWidth, maxHeight, width, height) {
var param = { width: width, height: height, top: 0, left: 0 };
if (width > maxWidth || height > maxHeight) {
var rateWidth = width / maxWidth;
var rateHeight = height / maxHeight;
if (rateWidth > rateHeight) {
param.width = maxWidth;
param.height = height / rateWidth;
} else {
param.width = width / rateHeight;
param.height = maxHeight;
}
}
param.left = (maxWidth - param.width) / 2;
param.top = (maxHeight - param.height) / 2;
return param;
}
</script>
<input name="localfile" type="file" id="localfile" size="28" onchange="onUploadImgChange(this)" />
<!-- 以下是预览图片用的 -->
<div id="kk">
<div id="preview_wrapper">
<div id="preview_fake">
<img id="preview" src="" onload="onPreviewLoad(this)" />
</div>
</div>
<br />
<img id="preview_size_fake" />
</div>
</body>
</html>
代码解释
样式部分：
#kk：定义了一个包含预览区域的大容器，设置了宽度、高度和溢出处理。#preview_wrapper：预览图片的直接容器，设置了背景颜色和溢出处理。#preview_fake：用于在IE浏览器下显示预览图片，使用了AlphaImageLoader滤镜。#preview_size_fake：仅用于在IE浏览器下获取图片的原始尺寸，设置为不可见。#preview：用于在Firefox等现代浏览器下显示预览图片。
JavaScript部分：
onUploadImgChange：当用户选择文件时触发，检查文件格式，根据不同浏览器类型处理图片预览。onPreviewLoad：图片加载完成时触发，调用autoSizePreview函数调整图片大小。autoSizePreview：根据图片的原始尺寸和最大显示尺寸，计算缩放参数并调整图片的显示大小和位置。clacImgZoomParam：计算图片的缩放参数，确保图片在指定的最大宽度和高度内显示。
通过以上代码和解释，你可以在IE9及以上浏览器中实现图片上传和预览的功能。