开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

js预览本地图片 ie8

在 JavaScript 中预览本地图片在 IE8 中存在一些限制，主要是由于 IE8 对现代 JavaScript 特性和 API 的支持有限。以下是一些基础概念、相关优势、类型、应用场景以及解决方案：

基础概念

FileReader API：现代浏览器支持的 API，用于读取本地文件内容。但在 IE8 中不支持。
滤镜（Filters）：IE8 支持一些 CSS 滤镜，可以用来显示图片，但这种方法有局限性。

相关优势

用户体验：允许用户在上传前预览图片，提高用户体验。
减少错误：用户可以在上传前确认图片是否正确。

类型

FileReader API：现代浏览器使用的方法。
滤镜方法：IE8 使用的方法。

应用场景

图片上传功能：在用户上传图片前，允许用户预览图片。
在线图片编辑器：用户可以在编辑前预览图片效果。

解决方案

由于 IE8 不支持 FileReader API，我们可以使用 IE8 的滤镜功能来实现图片预览。以下是一个示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>IE8 图片预览</title>
    <style>
        #preview {
            width: 200px;
            height: 200px;
            border: 1px solid #ccc;
            filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale', src=''); /* IE8 */
        }
    </style>
</head>
<body>
    <input type="file" id="fileInput" />
    <div id="preview"></div>

    <script>
        document.getElementById('fileInput').onchange = function(event) {
            var file = event.target.files[0];
            if (!file) return;

            if (window.FileReader) {
                // 现代浏览器
                var reader = new FileReader();
                reader.onload = function(e) {
                    document.getElementById('preview').innerHTML = '<img src="' + e.target.result + '" />';
                };
                reader.readAsDataURL(file);
            } else if (window.ActiveXObject || "ActiveXObject" in window) {
                // IE8
                var img = new Image();
                img.src = window.URL.createObjectURL(file);
                document.getElementById('preview').style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale', src='" + img.src + "')";
            }
        };
    </script>
</body>
</html>

解释

现代浏览器：使用 FileReader API 读取文件并显示预览。
IE8：使用滤镜 AlphaImageLoader 来显示图片。注意，这种方法有一些限制，比如不能处理跨域图片等问题。

注意事项

兼容性：这种方法主要针对 IE8，其他现代浏览器应使用 FileReader API。
安全性：处理本地文件时要注意安全性，避免潜在的安全风险。

通过这种方式，可以在 IE8 中实现本地图片预览功能，尽管有一些限制，但可以满足基本需求。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

js实现本地上传图片预览

在做网站系统时经常会用到图片上传功能，用户往往希望能看到自己上传的图片的样子，有的人是采用将图片上传到服务器之后再回显到页面，这种方式在无形之中增加了服务器的运行压力，因为如果用户感觉不满意还会再次上传图片...为了减轻服务器压力，我们通过js来实现本地图片上传预览功能，不经过服务器就实现预览效果。...name="file" id="doc" style="width:150px;" onchange="javascript:setImagePreview();"> 上面这部分代码是页面上传按钮和显示图片的区域...接下来请看js控制代码 function setImagePreview(avalue) { var docObj=document.getElementById("doc"); var imgObjPreview...} imgObjPreview.style.display = 'none'; document.selection.empty(); } return true; } 这样我们就实现了本地图片上传预览功能

8.1K4 0

本地单张图片上传预览

1.0, minimum-scale=1.0"> 7 8 本地单图上传预览...imgPre');"/> 21 22 23 24 /** 25 * 本地图片预览

3.3K1 0

JS实现本地预览上传图片并获取宽高

我们在本地上传文件、图片是用file类型的表单，大多时候我们想让上传的图片先预览在我们本地，下面来看看代码吧。...JS部分： function selectImg(file) { if (!file.files || !...$('#showImg').attr("src", replaceSrc); }; reader.readAsDataURL(file.files[0]); } 上面就实现了上传图片是本地预览图片了...我们可以通过下面这句代码获得图片的其他信息↓ console.log(file.files); 可以从上面的截图看到，有图片的名字、大小、格式等。...但是没有图片的宽度和高度，获取图片的宽度和高度需要用到Image() 对象。 function selectImg(file) { if (!file.files || !

8K2 0

图片上传预览js

DOCTYPE html> js.../jquery.js" type="text/javascript" charset="utf-8"> ... 图片

49K9 0

js上传图片预览

28.2K0 0

js --- 上传图片预览

DOCTYPE html> 图片上传预览功能 <input id='inp' type="file" name...= -1){ imgs.src= imgSrc; }else{ alert('错误的图片格式'); } // 正确显示 function geturl(file){

34.8K1 0

图片预览放大js插件

分享一个非常简单的图片预览插件viewer 首先引入js和css viewer.js:下载链接 jquery1.11.3.js:下载链接 jquery-viewer.min.js:下载链接 viewer.css...viewer.css" rel="external nofollow" rel="external nofollow"> js..."> js"> js"></...//缩放等级（1倍) $image.viewer('zoomTo', 1); } }); // 初始化后获取Viewer.js

61.8K3 1

js实现图片预览翻页

原文地址可以直接复制粘贴打开，图片是在线的，原理简单好懂！效果源码 js"> <meta...= document.getElementById("pre"); var next = document.getElementById("next"); //要切换图片就是要修改...但是返回的是数组，所以你得操作的是数组中的对象 var img = document.getElementsByTagName("img")[0]; //创建一个数组用来保存图片的路径

4553 0

H5实现本地预览图片

我们使用H5可以很容易的实现图片上传前对其进行预览的功能 Html代码如下：实现预览功能的...js代码如下： window.onload = function () { var fileTag = document.getElementById...} }; fileReader.readAsDataURL(file); }; }; 预览效果如下...最后注意一点，H5实现图片预览只能使用原生JS进行DOM元素的操作，若使用jQuery则无法实现该效果。

2.3K2 0

本地与在线图片转Base64及图片预览

查看效果：http://sandbox.runjs.cn/show/tgvbo9nq 本地图片转Base64（从而可以预览图片）： function localImgLoad() { var src...localBase64StrContainer').value = e.target.result; } read.readAsDataURL(src) }; 本地图片预览...(本地图片转Base64)： ...localBase64StrContainer" cols=50 rows=6> 在线图片转....parent().append(""); },'image/png') } 在线图片转

2.5K1 0

js File 转 Base64 图片预览

DOCTYPE html> 图片预览... // 文件类型转换 // File 转 Base64 图片预览

8.8K6 1

强大的图片预览组件Viewer.js

1、 Viewer.js简介 Viewer.js 是一款强大的图片查看器。我们通过Viewer.js 在页面上添加强大的图片查看功能，同时，这款优秀的插件配置操作起来也非常的方便。...Viewer.js分为2个版本，js版本和jquery版本，下载地址分别为纯JS版本：https://github.com/fengyuanchen/viewerjs jQuery 版本：GitHub...截图大概如下： 2、Viewer.js支持的功能支持移动设备触摸事件支持响应式支持放大/缩小支持旋转(类似微博的图片旋转) 支持水平/垂直翻转支持图片移动支持键盘...图片是否可缩放 rotatable 布尔值 true 图片是否可旋转 scalable 布尔值 true 图片是否可翻转 transition 布尔值 true 使用 CSS3 过度 fullscreen...http-equiv="Pragma" content="no-cache" /> 图片预览

3.6K2 0

Viewer.js 图片预览插件实现效果代码

直接引入文件 Javascript版： js/viewer.min.js">... jQuery版： js/jquery.min.js"> js/viewer.min.js"> npm安装 npm install viewerjs 图片 --> 图片1">...布尔值 true 图片是否可缩放 rotatable 布尔值 true 图片是否可旋转 scalable 布尔值 true 图片是否可翻转 transition 布尔值 true 使用 CSS3 过度

8K2 0

JAVA图片批量上传JS-带预览功能

这篇文章就简单的介绍一个很好用的文件上传工具，批量带预览功能。直接贴代码吧，都有注释，很好理解。 HTML页面 js.../jquery-1.8.3.min.js"> js/upload/zyupload-1.0.0...true, // 是否可以拖动上传文件 tailor : true, // 是否可以裁剪图片...: true, // 是否可以删除文件 finishDel : false, // 是否在上传文件完成后删除预览

7.2K5 0

原来本地图片预览还能这样搞

今天，我们就来一起学习如何使用原生 JavaScript 实现本地图片上传预览功能。...准备工作：HTML 结构首先，我们需要在 HTML 中搭建一个简单的结构，用于文件上传和图片预览。主要包含两个元素： 1. : 用于让用户选择本地文件。 2....DOCTYPE html> 本地图片上传预览本地图片上传预览...本地图片上传预览 (FileReader) 本地图片上传预览 (createObjectURL) <body

970 0

原来本地图片预览还能这样搞

原来本地图片预览还能这样搞在网页开发中，经常会遇到需要让用户上传图片并在上传前进行预览的需求。...这样做的好处显而易见：用户可以立即看到自己选择的图片是否正确，避免了不必要的上传和服务器资源浪费，提升了用户体验。今天，我们就来一起学习如何使用原生 JavaScript 实现本地图片上传预览功能。...准备工作：HTML 结构首先，我们需要在 HTML 中搭建一个简单的结构，用于文件上传和图片预览。主要包含两个元素：: 用于让用户选择本地文件。...DOCTYPE html> 本地图片上传预览本地图片上传预览...本地图片上传预览 (FileReader) <

892 0

JavaScript实现本地图片上传预览功能（兼容IE、chrome、FF）

摘要本人个人nodejs分享论坛：tnodejs.com 参考：http://blog.csdn.net/nhconch/article/details/7295456 需要解决的问题有：本地图片如何在上传前预览...代码实现主要利用到jquery插件imgAreaSelect，FileReader对象（chrome和ff获取本地图片数据的接口），IE滤镜效果。...—预览图片显示区域--> 预览小图片在img之后 $('')...img之后 1.3、实现在线预览功能 function previewImage(file) { var porImg = $('#biuuu'),//首先获取大图片jquery对象 viewImg =

1.9K6 0

JS魔法堂之实战：纯前端的图片预览

一、前言　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　图片上传是一个普通不过的功能，而图片预览就是就是上传功能中必不可少的子功能了。...先不管文件异步提交的解决方案，就是服务端清理那些临时的预览图片已经增加不少工作量了。偶然从MDN上找到纯前端图片预览的相关资料，经过整理后记录下来以便日后查阅。...当URL为用户计算机本地地址时有效, 而img元素的src为用户计算机本地地址时会抛不允许访问本地文件系统的异常。...四、实现　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　接下来我们就利用FileReader的readAsDataURL来获取Data URI Scheme来实现图片预览的功能，而IE5.5...因此假如使用IE11,但文本模式却设置为10以下，那就没木有办法实现图片预览了。

2.4K6 0

在上传图片之前预览图片

) { readURL(this); }); js

4.8K2 0

viewer实现图片预览

插件描述：Viewer.js 是一款强大的图片查看器 1、引入文件 js版本 js/jquery.min.js"> js/viewer.min.js"> 2、HTML 图片1"> 图片2">...图片3"> 图片4">...图片5"> 图片6"> </ul

2.3K1 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭