js图片上传前预览功能（兼容所有浏览器）
更新时间：2016年08月24日 16:22:33 作者：chua1989
这篇文章主要为大家详细介绍了js图片上传前预览功能，兼容所有浏览器，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
网上找到的一份文件上传前预览的代码,转自JavaScript 图片的上传前预览（兼容所有浏览器）
<!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>
实现要点
● 对于 Chrome、Firefox、IE10 使用 FileReader 来实现。
● 对于 IE6~9 使用滤镜 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader 来实现。
测试了一下IE8+都没有问题。但是IE7下file.value被浏览器去掉了文件路径分割线从而显示不出来
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
JavaScript报错：Uncaught TypeError: XXX is
在 JavaScript 编程中,“Uncaught TypeError: XYZ is not iterable” 是一种常见的错误,这种错误通常发生在试图对一个非可迭代对象进行迭代操作时,了解这种错误的成因和解决方法,对于编写健壮的代码至关重要,需要的朋友可以参考下2024-07-07
这篇文章主要介绍了如何在 JavaScript 中更好地使用数组，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2018-09-09
大家在日常开发的时候经常要用到日期格式的处理，下面这篇文章主要给大家介绍了js中常规日期格式处理、月历渲染及倒计时函数,有需要的朋友可以参考借鉴，下面来一起看看吧。2016-12-12![javascript 移动鼠标得到单元格所在table表中的rowIndex位置[兼容ie,firefox]](//img.jbzj.com/images/xgimg/bcimg3.png)
javascript 移动鼠标得到单元格所在table表中的rowIndex位置[兼容ie,firefox]
移动鼠标，得到单元格所在表中的位置,主要是学习使用js的e.srcElement.2009-12-12
这篇文章主要为大家介绍了JavaScript常见的五个内存错误，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-01-01
这篇文章主要介绍了JavaScript闭包原理与用法,结合实例形式详细分析了JavaScript闭包相关概念、原理、用法及操作注意事项,需要的朋友可以参考下2020-05-05
这篇文章主要给大家介绍了关于echarts提示框tooltip被遮挡的解决办法, 在制作图表中,发现有时候tooltip会被线条遮挡或者被柱子折线遮挡,这种情况会偶尔出现,需要的朋友可以参考下2023-08-08
在JavaScript中，数据类型的转换是一项常见的任务，不同的数据类型之间需要相互转换以满足程序的需求，本篇博客将深入探讨JavaScript中的数据类型转换，包括隐式转换和显式转换的概念、转换规则和常见的数据类型转换示例2023-06-06
使用JavaScript实现网页秒表功能（含开始、暂停、继续、重置功能）
这篇文章主要介绍了使用JavaScript实现网页秒表（含开始、暂停、继续、重置功能）,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-06-06
这篇文章主要为大家介绍了JavaScript定义ajax函数，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助<BR>2021-11-11
![javascript 移动鼠标得到单元格所在table表中的rowIndex位置[兼容ie,firefox]](http://img.jbzj.com/images/xgimg/bcimg3.png)
最新评论