Nodejs JS本地图片预览 兼容 IE6789,现代浏览器(firefox,chrome)

Node.js JS本地图片预览 兼容 IE6/7/8/9 和现代浏览器 (Firefox, Chrome)

感谢 原作者 提供的代码。以下是对该功能的改进版本，以确保兼容性覆盖更广范围的浏览器。

示例代码

function previewImage(file, img, callback, backgroundDiv) {
    var path = "";

    // 检查文件类型是否为图片
    var checkPic = function (path) {
        var accept = ["jpg", "bmp", "gif", "png"];
        for (var i = 0; i < accept.length; i++) {
            if (path.toLowerCase().endsWith("." + accept[i])) {
                return true;
            }
        }
        return false;
    }

    // 获取浏览器信息并判断是否为IE
    var browser_agent = navigator.userAgent.toUpperCase();
    
    // 现代浏览器（支持FileReader API）
    if (window.FileReader && window.URL) {
        if (file.files.length === 0) {
            if (callback) callback(false);
            return;
        }
        
        var reader = new FileReader();
        reader.onload = function(e) {
            img.src = e.target.result;
            if (callback) callback(img);
        };
        reader.readAsDataURL(file.files[0]);

        // 如果不支持FileReader API，则检查是否为IE浏览器
    } else if (browser_agent.indexOf("MSIE") > -1) {
        path = file.value;

        if (!checkPic(path)) {
            if (callback) callback(false);
            return;
        }

        if (browser_agent.indexOf("MSIE 6.0") > -1) {
            img.src = path;
            if (callback) callback(img);
        } else {
            if (backgroundDiv) {
                backgroundDiv.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src='" + path + "')";
            }
            if (callback) callback(false);
        }
    } else {
        alert("您的浏览器不支持此功能");
    }
}

解释

1. 图片类型检查：

   • 使用 checkPic 函数检查上传的文件扩展名是否为常见的图片格式（如 .jpg, .png）。

2. 现代浏览器支持：

   • 使用 FileReader API 读取本地文件，并将其转换为 Data URL，以便在 <img> 标签中显示。
   • reader.onload 事件处理程序将读取的结果设置为 <img> 标签的 src 属性。

3. IE浏览器支持：

   • 对于IE浏览器，使用 AlphaImageLoader 来处理图片预览。对于IE6，直接将路径赋值给 <img> 标签的 src 属性。
   • 对于IE7/8/9，使用 filter 属性来实现图片的缩放和显示。

4. 错误处理：

   • 如果检测到浏览器不支持上述任何功能，则弹出警告提示用户。

使用方法

<input type="file" id="uploadInput" />
<img id="previewImg" src="" alt="Preview" />
<div id="backgroundDiv"></div>

<script>
document.getElementById('uploadInput').addEventListener('change', function(event) {
    previewImage(event.target, document.getElementById('previewImg'), function(result) {
        if (result) {
            console.log("图片预览成功");
        } else {
            console.log("图片预览失败");
        }
    }, document.getElementById('backgroundDiv'));
});
</script>

这样就可以实现一个跨浏览器的本地图片预览功能，既兼容旧版IE浏览器，也适用于现代浏览器。