图片预览JavaScript方法
实现要点
● 对于 Chrome、Firefox、IE10 使用 FileReader 来实现。
● 对于 IE6~9 使用滤镜 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader 来实现。
实现代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
#preview, .img, img
{
width:200px;
height:200px;
}
#preview
{
border:1px solid #000;
}
</style>
</head>
<body>
<div id="preview"></div>
<input type="file" onchange="preview(this)" />
<script type="text/javascript">
function preview(file)
{
var prevDiv = document.getElementById('preview');
if (file.files && file.files[0])
{
var reader = new FileReader();
reader.onload = function(evt){
prevDiv.innerHTML = '<img src="' + evt.target.result + '" />';
}
reader.readAsDataURL(file.files[0]);
}
else
{
prevDiv.innerHTML = '<div class="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + file.value + '\'"></div>';
}
}
</script>
</body>
</html>
最新文章
- 易用BPM时代,软件开发者缘何选择H3?
- ASP.NET的视图(Razor)循环产生html代码
- 在jquery的ajax中添加自定义的header信息
- LeetCode 169. Majority Element
- MSP是什么?
- Android IOS WebRTC 音视频开发总结(七十)-- 移动端音视频技术优化的七个方向
- android系统中查看哪些端口被哪些应用打开
- smarty模板中引用常量没效果
- 【LeetCode OJ】Palindrome Partitioning
- foreach 和for语句比较
- QPalette
- Android makefile
- systemd的日志管理进程journald
- Javascript高级编程学习笔记(72)—— 模拟事件(2)IE事件模拟
- Vue 爬坑之路(一)—— 使用 vue-cli 搭建项目
- coredns CrashLoopBackOff 报错
- 【BZOJ3512】DZY Loves Math IV(杜教筛)
- 【九天教您南方cass 9.1】 11 方格网土方计算
- 【Python】Excel操作-1
- [转帖]Kubernetes及容器编排的总体介绍【译】