JavaScript实现图片上传预览及浏览器兼容处理

"这篇文章主要介绍了如何在JavaScript中实现图片的实时预览功能，同时兼容不同的浏览器。由于浏览器安全策略限制，传统的获取图片路径的方式不再适用，因此需要采用新的方法来达到预览效果。" 在JavaScript中，为了实现用户选择图片后的实时预览，通常会利用HTML5中的File API。由于浏览器的同源策略和安全考虑，直接获取上传文件的路径是不允许的，所以我们不能像以前那样通过文件路径来显示图片。为了解决这个问题，我们可以使用`FileReader`对象来读取用户选择的文件，并将其转换为可以在页面上显示的数据URL。 以下是一个实现图片实时预览的JavaScript函数，名为`changeImg`，它接收一个`fileObj`参数，这个参数通常是HTML的`<input type="file">`元素： ```javascript function changeImg(fileObj) { var allowtype = ["JPG", "GIF", "PNG", "BMP"]; // 允许的图片类型 var file = fileObj.value; var img = document.getElementById($(fileObj).prev().children().children().attr("id")); // 获取图片元素 var imgdiv = img.parentNode; // 获取图片的父元素 if (file != "") { // 检查是否有文件被选中 var fileType = file.substring(file.lastIndexOf('.') + 1).toUpperCase(); // 获取文件类型 if (allowtype.contains(fileType)) { // 检查文件类型是否允许 if (fileObj.files && fileObj.files[0]) { // 如果支持FileList对象 var reader = new FileReader(); // 创建FileReader实例 reader.onload = function (evt) { // 文件读取完成后执行 img.src = evt.target.result; // 设置图片的src为读取到的数据URL }; reader.readAsDataURL(fileObj.files[0]); // 开始读取文件为数据URL } else { // 对不支持FileList对象的旧版浏览器的处理 imgdiv.setAttribute('style', 'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)'); fileObj.select(); // 选择文件输入框中的文件 fileObj.blur(); // 防止失去焦点 img.setAttribute("style", "visibility:hidden"); // 隐藏原图片 var src = document.selection.createRange().text; // 获取文件内容 imgdiv.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src; // 使用滤镜加载图片 } return true; } else { alert("请选择正确的图片格式!"); // 提示错误 $(fileObj).focus(); // 将焦点返回到文件输入框 $(fileObj).val(""); // 清空文件输入框 return false; } } else { imgdiv.removeAttribute("style"); // 如果没有选择文件，移除样式 img.removeAttribute("style"); // 移除图片的隐藏样式 img.setAttribute("src", "img/default.png"); // 设置默认图片 } } ``` 在这个函数中，首先定义了允许的图片类型数组，然后获取用户选择的文件和图片元素。如果用户选择了文件，函数会检查文件类型是否在允许的范围内。对于支持File API的现代浏览器，使用`FileReader`的`readAsDataURL`方法将文件转换为数据URL，然后将其设置为图片的`src`属性，从而实现预览。对于不支持File API的老式浏览器，如IE，它会使用滤镜技术(`DXImageTransform`)来显示图片。 在用户选择非允许类型的图片或未选择图片时，函数会给出相应的提示，并恢复图片到初始状态。这个函数的实现兼顾了新旧浏览器的兼容性，确保了大部分用户都能正常预览所选图片。