jQuery实现图片上传实时预览

本篇文章主要介绍了如何使用jQuery实现一个简单的图片上传功能，并提供自动预览功能。以下是详细步骤和关键知识点： 1. **jQuery选择器与事件处理**： 使用jQuery的`$("#picture").change(function() {...})`来监听用户选择图片的事件。当用户在`#picture`输入框中改变（即选择）文件时，会触发此函数。 2. **文件对象处理**： 在事件回调中，获取用户选择的文件对象（`var fileObj = $(this)[0];`），以及文件数组中的第一个元素（`fileObj.files[0]`）。这一步确保了对用户上传的单个文件进行操作。 3. **创建URL和数据处理**： 使用`window.URL.createObjectURL(fileObj.files[0])`创建一个临时的URL，可以在线显示图片。`dataURL`变量用于存储这个临时URL。 4. **图片类型验证**： 验证用户上传的图片是否是常见的图片格式（如.jpg, .gif, .jpeg, .png, .bmp），通过正则表达式`regext = /\.jpg$|\.gif$|\.jpeg$|\.png$|\.bmp$/gi`来实现。如果不是这些格式，提示用户选择正确的图片类型，并清除错误的文件。 5. **预览图片**： 如果图片类型正确，将`dataURL`设置为图片元素`<img>`的`src`属性，显示预览图。`$("#tr_userpicture").show();`使包含预览图片的`tr_userpicture`元素可见。 6. **隐藏与显示逻辑**： 当用户未选择任何图片或图片格式不正确时，隐藏`tr_userpicture`元素，并提示用户。`document.getElementById('tr_userpicture').style.display='none';`用于隐藏元素。 7. **兼容性处理**： 对于一些不支持`window.URL.createObjectURL()`的浏览器，可能需要使用`imgObj.style.filter`来加载图片，如IE系列浏览器，这里使用了`progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)`滤镜。 这篇文章的核心内容是如何利用jQuery实现一个交互式的图片上传功能，允许用户实时预览所选图片并确保格式正确。这对于Web开发中的文件上传功能是一个实用且直观的示例。