<html>
<head>
<script>
function getPath(obj) {
if(obj) {
if (window.navigator.userAgent.indexOf("MSIE")>=1) {
obj.select();
return document.selection.createRange().text;
}
else if(window.navigator.userAgent.indexOf("Firefox")>=1) {
if(obj.files) {
return obj.files.item(0).getAsDataURL();
}
return obj.value;
}
return obj.value;
}
}
function doSomething(obj){
document.getElementById("file_id").value = getPath(obj);
var dom = document.getElementById("div_id");
var src = document.selection.createRange().text;
dom.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod = scale)";
dom.filters("DXImageTransform.Microsoft.AlphaImageLoader").src = src;
}
</script>
</head>
<body>
<input id = "file_id" type = "file" onchange="doSomething(this);"/>;
<img id="div_id" style="width:120px;height:80px;border:solid 1px #FEA88"></img>
</body>
</html>
分享到：
相关推荐
3. **兼容性问题**：需要注意的是，`AlphaImageLoader`滤镜仅在IE浏览器中可用，因此此方案只适用于IE8及其后续版本。对于其他浏览器，可能需要采用不同的技术来实现图片预览功能，例如使用`<img>`标签或现代的...
在IE浏览器中，无法直接通过input[file].value 获取完整的文件路径，因此我们需要使用滤镜来解决该问题。我们使用 `filter:progid:DXImageTransform.Microsoft.AlphaImageLoader` 滤镜来加载图片，并使用 `...
对于不支持FileReader API的旧版IE浏览器，代码使用了滤镜`DXImageTransform.Microsoft.AlphaImageLoader`来实现图片预览。`document.selection.createRange().text`用于获取选中的文件路径，然后应用滤镜设置。`...
总之，"有图片预览功能的上传表单.rar"是一个解决IE7图片预览问题的实例，它利用了早期IE浏览器的特性来实现这一功能。通过学习和理解这个代码，开发者可以更好地理解和处理在老旧浏览器中实现复杂功能的挑战。
// 对于不支持FileReader API的旧版IE浏览器 var sFilter = 'filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale, src="'; file.select(); var src = document.selection....
// IE浏览器 var Preview = document.getElementById(divImage); Preview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = upload.value; } } } ``` 以上是核心的JavaScript部分，包括...
对于非IE浏览器，需要采用其他技术方案。 #### 扩展阅读 - **HTML5 FileReader API**：学习如何使用HTML5的FileReader API来实现图片预览，这种方法支持所有现代浏览器。 - **跨浏览器兼容性解决方案**：了解如何...
此函数针对旧版IE浏览器（如IE7）提供了特殊的处理方法。它使用 `AlphaImageLoader` 滤镜来加载图片，并计算图片尺寸。这部分代码同样实现了根据图片实际尺寸和目标尺寸之间的比例来调整图片尺寸的功能。 #### 总结...
总之，使用JavaScript实现图片预览和上传，同时兼容IE浏览器，需要结合HTML5的新特性与旧版IE的特有方法。通过FileReader、File API、滤镜技术以及传统表单提交等方式，可以实现这一功能，确保在各种浏览器环境下都...
这种方法不仅适用于IE7，同样适用于更早版本的IE浏览器（如IE6）。虽然现代浏览器已经不再需要这种方法，但在处理老旧项目的兼容性问题时，这些技巧仍然非常有用。 需要注意的是，随着Web技术的发展，现代浏览器...
具体实现是在非IE浏览器利用HTML5去显示，在IE浏览器则直接调用IE的滤镜功能去实现。具体代码如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xht
在IE浏览器中，由于不支持`createObjectURL()`，我们需使用滤镜技术(`ActiveXObject`)来加载图片。以下是完整`setImagePreviews()`函数的代码： ```javascript function setImagePreviews(avalue) { var docObj = ...
标题“兼容ie图片上传显示”暗示我们需要解决的核心问题是如何在IE浏览器上实现一个头像或其他类型的图片上传功能，而且无需引入额外的JavaScript库或插件。描述中的“不用引进任何脚本”可能是指尽量使用原生的HTML...
4. **图片加载显示**：根据不同的浏览器加载图片，对于较老的IE浏览器使用ActiveX控件和滤镜效果显示图片，对于支持File API的现代浏览器则使用`window.URL.createObjectURL`方法。 5. **ThinkPHP后端处理**：当...
此滤镜是IE浏览器特有的，而在其他浏览器中，可以通过不同的方式实现预览，例如Firefox支持`getAsDataURL`方法来获取图片数据并显示。 需要注意的是，代码中的路径处理函数`getPath(obj)`是用于获取用户选择的图片...
实例一主要针对IE浏览器，利用了IE特有的滤镜技术，特别是`DXImageTransform.Microsoft.AlphaImageLoader`滤镜。这个滤镜用于处理图片，尤其是透明PNG图片。在HTML部分，创建了一个ID为`picshow`的`div`元素作为预览...
例如，火狐浏览器使用window.URL.createObjectURL来创建一个指向文件内容的URL，而IE浏览器则需要使用特定的滤镜来显示图片。 知识点七：实际应用中的注意事项 在实际应用中，还需要考虑用户体验的问题。例如，预览...