<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>get file input full path</title>
<script type="text/javascript">
function PreviewImage(obj, imgPreviewId, divPreviewId) {
var allowExtention = ".jpg,.bmp,.gif,.png";
//,允许上传文件的后缀名
var extention = obj.value.substring(obj.value.lastIndexOf(".") + 1).toLowerCase();
var browserVersion = window.navigator.userAgent.toUpperCase();
if (allowExtention.indexOf(extention) > -1) {
if (browserVersion.indexOf("MSIE") > -1) {
if (browserVersion.indexOf("MSIE 6.0") > -1) {//ie6
document.getElementById(imgPreviewId).setAttribute("src", obj.value);
} else {//ie[7-8]、ie9
obj.select();
var newPreview = document.getElementById(divPreviewId + "New");
if (newPreview == null) {
newPreview = document.createElement("div");
newPreview.setAttribute("id", divPreviewId + "New");
newPreview.style.width = 160;
newPreview.style.height = 170;
newPreview.style.border = "solid 1px #d2e2e2";
}
newPreview.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src='" + document.selection.createRange().text + "')";
var tempDivPreview = document.getElementById(divPreviewId);
tempDivPreview.parentNode.insertBefore(newPreview, tempDivPreview);
tempDivPreview.style.display = "none";
}
} else if (browserVersion.indexOf("FIREFOX") > -1) {//firefox
var firefoxVersion = parseFloat(browserVersion.toLowerCase().match(/firefox\/([\d.]+)/)[1]);
if (firefoxVersion < 7) {//firefox7以下版本
document.getElementById(imgPreviewId).setAttribute("src", obj.files[0].getAsDataURL());
} else {//firefox7.0+
document.getElementById(imgPreviewId).setAttribute("src", window.URL.createObjectURL(obj.files[0]));
}
} else if (obj.files) {
//兼容chrome、火狐等，HTML5获取路径
if ( typeof FileReader !== "undefined") {
var reader = new FileReader();
reader.onload = function(e) {
document.getElementById(imgPreviewId).setAttribute("src", e.target.result);
}
reader.readAsDataURL(obj.files[0]);
} else if (browserVersion.indexOf("SAFARI") > -1) {
alert("暂时不支持Safari浏览器!");
}
} else {
document.getElementById(divPreviewId).setAttribute("src", obj.value);
}
} else {
alert("仅支持" + allowSuffix + "为后缀名的文件!");
obj.value = "";
//清空选中文件
if (browserVersion.indexOf("MSIE") > -1) {
obj.select();
document.selection.clear();
}
obj.outerHTML = obj.outerHTML;
}
}
</script>
</head>
<body>
<form name="form5" id="form5">
<input type="file" name="file5" id="file5" onchange="PreviewImage(this,'imgView','divNewPreview')"/>
<div id="divNewPreview" style="width: 158px;height: 158px;">
<img id="imgView" style="width: 158px;height: 158px;" src="" alt="" />
</div>
</form>
</body></html>
IE浏览器需要启用“将文件上载到服务器时包含本地目录路径” 如下图：
相关推荐
jquery file上传预览本地图片支持IE6\7\8\9\10 chrome 火狐 网上有很多关于 file上传预览本地图片开源角本但都对支持到IE6\7\8，而且chrome 火狐最新版本也有问题，自己动手丰衣足食。分享给给大家。
本解决方案特别强调了对IE、Firefox和Chrome浏览器的支持，这涵盖了大部分用户常用的网络浏览器。 在线预览PDF的技术实现主要基于以下几个关键点： 1. **PDF.js**：这是一个由Mozilla开发的开源库，它允许在Web...
例如ie7/ie8的滤镜预览法，firefox 3的getAsDataURL方法。 但在opera、safari和chrome还是没有办法实现本地预览，只能通过后台来支持预览。 在研究了各种预览方法后，作为总结，写了这个程序，跟大家一起分享。
本篇文章将详细探讨如何实现“图片上传预览”功能，并确保在IE 6/7/8及Firefox（包括新版）等浏览器中的兼容性。 首先，我们需要了解不同浏览器对HTML5新特性的支持情况。现代浏览器如Chrome、Safari和新版Firefox...
这段代码是用于在图片上传前实现预览功能的，它兼容了Internet Explorer（IE）、Chrome 和 Firefox 这三种主流浏览器。在用户选择图片文件后，可以在网页上显示一个缩放后的预览图，确保预览图像的宽度和高度不超过...
兼容ie[6-9]、火狐、Chrome、opera、maxthon3、360浏览器的js本地图片预览"提供了一个JavaScript解决方案，用于实现一个功能强大的本地图片预览功能，它能在多种主流浏览器中正常工作，包括古老的Internet Explorer ...
本文将详细讲解如何实现一个跨浏览器的图片上传预览功能，包括对火狐（Firefox）、谷歌（Chrome）以及Internet Explorer（IE）等主流浏览器的支持。 首先，我们需要明白，图片上传预览的核心在于利用JavaScript的...
在网页开发中，图片上传是常见的功能之一，用户体验的一个重要环节就是提供图片预览功能，让用户在...通过这些技术，我们可以为用户提供一个无缝且一致的图片上传预览体验，无论他们使用的是IE、Firefox还是Chrome。
本项目特别强调了对IE（Internet Explorer）、Firefox（FF）和Chrome的兼容性，这意味着它可能使用了一些特定的代码片段或polyfill来弥补不同浏览器之间的差异。 5. **PHP**：后端语言PHP在这里可能用于接收上传的...
例如，IE浏览器通常对新特性的支持较慢，而现代浏览器如Chrome和Firefox则更倾向于支持最新的Web标准。因此，为了确保在所有这些浏览器上都能正常工作，开发者可能使用了如HTML5 File API、jQuery、或者专门的多文件...
图片上传预览是一种在图片上传之前对图片进行本地预览的技术。...例如ie7/ie8的滤镜预览法，firefox 3的getAsDataURL方法。 但在opera、safari和chrome还是没有办法实现本地预览，只能通过后台来支持预览。（转载自用）
本示例主要探讨如何使用JavaScript结合IFrame技术来实现异步图片上传，并提供预览功能，同时确保兼容Firefox、Chrome和IE9等主流浏览器。 首先，我们需要了解异步上传的基本原理。异步上传，也称为Ajax上传，是指在...
在早期，由于浏览器之间的差异，尤其是Firefox与其他主流浏览器如Chrome、Safari和IE的差异，图片预览功能的实现并不简单。例如，Firefox不支持HTML5的FileReader API，这是现代浏览器中实现图片预览的主要方式。 ...
Jsp图片预览程序（含Java源码） 目前，很多网站都在为提升用户体验而努力，想尽多种办法让用户在网站上...程序中的JavaScript部分兼容ie6/7/8, firefox 3.5.5以及opera 10、safari 4.0.4、 chrome 3.0 等多种浏览器。
例如ie7/ie8的滤镜预览法，firefox 3的getAsDataURL方法。 但在opera、safari和chrome还是没有办法实现本地预览，只能通过后台来支持预览。 在研究了各种预览方法后，作为总结，写了这个程序，跟大家一起分享。 上次...
这个标题提到的"js预览图片 上传前预览图片 兼容ie6.7.8.9 ff 谷歌 opera 苹果浏览器"，表明这是一个旨在解决浏览器兼容性问题的解决方案，涵盖了老版本的Internet Explorer（IE6到IE9）以及Firefox、Chrome、Opera...
例如ie7/ie8的滤镜预览法，firefox 3的getAsDataURL方法。 但在opera、safari和chrome还是没有办法实现本地预览，只能通过后台来支持预览。 在研究了各种预览方法后，作为总结，写了这个程序，跟大家一起分享。
1. **跨浏览器支持**：Lodop 6.057版本能够无缝对接Chrome、IE和Firefox，解决了不同浏览器环境下打印问题的困扰。这对于开发者来说，意味着无需为每个浏览器编写特定的打印代码，大大提高了开发效率。 2. **易于...
"支持谷歌 360 火狐等图片上传预览"这个标题暗示了这是一个跨浏览器的解决方案，旨在确保在不同的浏览器环境下，如谷歌浏览器（Chrome）、360浏览器以及火狐浏览器（Firefox）中，图片预览功能都能正常运行。...
jquery图片上传预览插件，通过 IE6、7、8、9 , chrome, firefox测试 测试时采用的是jquery1.7.1，未经过其它jquery版本测试。 使用时，您可以根据需要，随意修改！ --------------------------------- =====更新...