javascript上传图片前预览图片兼容大多数浏览器

在JavaScript中实现上传图片前的预览功能是一项常见的需求，特别是在网页表单中，用户在上传图片之前能够看到即将上传的图片效果。这个功能通过利用HTML5的File API以及对不同浏览器的兼容性处理来实现。以下是一个详细的步骤和解释： 1. **HTML 结构**： 在HTML中，我们需要一个`<input>`元素用于用户选择图片，以及一个`<img>`元素用于预览图片。例如： ```html <div id="localImag"> <img id="preview" width="-1" height="-1" style="display:none" /> </div> <asp:FileUpload ID="file_head" runat="server" onchange="javascript:setImagePreview();" /> ``` 这里`<asp:FileUpload>`是ASP.NET控件，但在HTML中，它表现为一个标准的`<input type="file">`。 2. **JavaScript 函数**： 创建一个名为`setImagePreview`的JavaScript函数，该函数会在用户选择图片文件后被调用。函数的主要任务是读取文件并将其显示到预览区域。 3. **检查文件类型**： 我们需要确保用户选择的是正确的图片格式。这可以通过检查文件名的扩展名完成： ```javascript if (!fileName.match(/.jpg|.gif|.png|.bmp/i)) { alert('您上传的图片格式不正确，请重新选择！'); return false; } ``` 4. **获取文件对象**： 使用`document.getElementById`获取`<input type="file">`的引用，然后通过`files`属性获取选中的文件对象。 5. **HTML5 File API**： 对于支持File API的现代浏览器（如Firefox、Chrome），我们可以直接创建一个URL来预览图片： ```javascript imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]); ``` 对于Safari浏览器，使用`webkitURL`代替`URL`： ```javascript imgObjPreview.src = window.webkitURL.createObjectURL(docObj.files[0]); ``` 6. **IE 浏览器兼容**： 对于不支持File API的旧版IE浏览器，我们可以使用ActiveXObject来实现预览。选择文件内容，然后创建一个范围对象，并将其转换为字符串： ```javascript docObj.select(); docObj.blur(); var imgSrc = document.selection.createRange().text; ``` 接下来，创建一个AlphaImageLoader滤镜来显示图片： ```javascript localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)"; localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc; ``` 7. **360浏览器兼容**： 360浏览器在某些版本中使用了Chrome的内核，因此需要同时处理`window.URL.createObjectURL`和`window.webkitURL.createObjectURL`的情况。 8. **样式调整**： 在预览图片时，可能需要设置图片的宽度和高度，以适应预览区域。例如： ```javascript imgObjPreview.style.display = 'block'; imgObjPreview.style.width = '63px'; imgObjPreview.style.height = '63px'; ``` 9. **异常处理**： 在尝试加载图片时，应该包含错误处理机制，以防用户尝试上传非图片文件或者伪造图片文件。 10. **清除选择**： 为了保持表单的干净，可以清除已选择的文件，例如使用`document.selection.empty()`。 总结起来，实现JavaScript图片预览功能需要考虑各种浏览器的兼容性，包括使用HTML5 File API、滤镜技术以及针对特定浏览器的特殊处理。在实际开发中，还可以考虑添加更丰富的用户体验，比如进度条、取消上传等。