本文实例为大家分享了javascript图片预览功能实现的具体代码，供大家参考，具体内容如下
先为大家分享一段关于js图片预览的代码，兼容火狐和谷歌浏览器
/* 案例展示图片预览 */
$(function(){
$("#file0").bind("change",function(){
clickupLoad();
});
});
function clickupLoad(){
var imgObject = document.getElementById('file0');
var getImageSrc = getFullPath(imgObject); //
在JavaScript中，实现上传图片及时预览功能是一个常见的需求，特别是在网页交互中，用户上传图片前能够看到预览效果可以提升用户体验。以下是一份详细解释这段JS代码如何工作的指南：
我们需要理解这段代码的核心部分。它使用了jQuery库来简化DOM操作。`$(function() {...})`是一个简写形式的`$(document).ready(function() {...})`，表示当文档加载完成后执行内部的函数。
1. 绑定事件监听器：
`$("#file0").bind("change", function() { ... })` 这行代码将一个`change`事件监听器绑定到ID为`file0`的`<input type="file">`元素上。当用户选择了一个文件（通常是图片）时，`change`事件会被触发，执行`clickupLoad`函数。
2. `clickupLoad`函数：
- `var imgObject = document.getElementById('file0')` 获取选择文件的输入元素。
- `var getImageSrc = getFullPath(imgObject)` 调用`getFullPath`函数获取图片的本地路径（这个函数主要是为了兼容不同浏览器）。
- `var srcs = window.URL.createObjectURL(imgObject.files[0])` 使用`createObjectURL`方法创建一个URL，该URL可被用作图片源。这个URL允许我们引用文件系统中的临时对象，而无需实际将文件上传到服务器。
- `var pos = getImageSrc.lastIndexOf(".")` 和 `var lastname = getImageSrc.substring(pos, getImageSrc.length)` 分别找到并获取图片的文件扩展名。
- `if(srcs != "")` 检查是否选择了图片。如果选择了，将预览图像的`src`属性设置为创建的URL；否则，显示一个警告消息。
3. `getFullPath`函数：
这个函数的目的是获取图片文件的完整路径。由于不同的浏览器处理文件路径的方式不同，所以需要进行兼容性处理。在IE中，使用`select()`和`document.selection.createRange().text`来获取文件路径；在Firefox和其他支持`files`属性的现代浏览器中，直接返回`value`属性。
4. 实例代码中的HTML部分：
- `<div id="preview">` 是预览区域，具有固定宽度和高度，以适应预览图像。
- `<input type="file" id="file0">` 是用户选择文件的输入控件。
- `<img id="yulan2">` 是预览图片的元素。
5. 图片缩放处理：
在示例代码中，还提到一个未完全提供的`previewImage`函数，用于处理图片的缩放。这个函数会计算图片在不改变宽高比的情况下缩放到指定最大尺寸(`MAXWIDTH`和`MAXHEIGHT`)的参数。目的是确保图片在预览区域内的显示比例正确，不会超出设定的边界。
总结来说，这段代码实现了在用户选择图片文件后，利用JavaScript实时预览所选图片的功能，兼容了Firefox和Chrome等主流浏览器。通过`createObjectURL`方法，可以安全地在本地环境中展示用户尚未上传到服务器的图片。同时，代码还考虑到了图片的缩放，以适应预览区域的大小。
