图片上传前的本地预览及兼容性处理

### 知识点详解 #### 标题：上传并预览图片 #### 描述： 1. **本地图片预览功能实现**： 在上传图片之前，需要先在本地实现一个预览功能。这一功能通常通过HTML5的File API来实现。利用input标签中的type="file"属性，用户可以打开文件选择对话框，并通过JavaScript监听文件选择事件（如change事件），从而获取用户所选的图片文件。之后，可以使用img标签的src属性设置为该图片文件的URL，来显示图片。 2. **跨浏览器兼容性问题**： - **兼容Internet Explorer (IE) 和 Firefox**： 要实现跨浏览器的兼容，需要针对不同浏览器的特点进行特殊处理。由于旧版IE浏览器不支持File API，需要使用ActiveXObject对象来模拟实现类似的功能。而Firefox和其他现代浏览器则可以使用File API。 3. **图片大小判断**： - **在Firefox下的实现**： Firefox支持File API，可以直接获取文件大小，这使得在上传前判断图片大小变得简单。可以使用File对象的size属性来获取文件大小，并根据业务需求设定最大尺寸限制。 - **在IE下的实现**： 在IE浏览器中，由于不支持标准的File API，必须使用ActiveXObject对象访问文件信息，且这种方式会导致浏览器弹出安全提示，用户体验不佳。推荐使用AJAX方式在服务器端进行文件大小的校验，这样可以避免弹窗，提高用户体验。 4. **图片类型合法性判断**： 需要确保用户上传的是有效的图片文件。可以通过检查文件的MIME类型来判断文件是否为图片。例如，可以检查文件的type属性是否匹配预期的图片类型，如'image/jpeg', 'image/png'等。 5. **图片尺寸判断**： 在客户端实现图片尺寸的判断主要是为了防止用户上传过大尺寸的图片，以节省服务器资源和带宽。使用JavaScript可以访问File对象的width和height属性来获取图片尺寸，然后进行判断。由于本功能只在IE下实现，可以使用特定的JavaScript库来获取图片尺寸信息。 6. **Java中图片以blob形式存入数据库的方法**： 在服务器端，当图片文件通过AJAX验证后，需要将图片文件存储到数据库中。在Java中，可以利用PreparedStatement来将图片以二进制大对象（BLOB）的形式存入数据库。具体实现参考提供的SaveUserInfoAction.java文件。一般情况下，会先将图片文件转换为字节数组，然后通过数据库连接执行SQL语句，将字节数组作为参数传递给SQL语句。 #### 标签：js 上传预览 图片 兼容ie、ff #### 标签解释： - **JS**：指的是JavaScript，用于实现客户端的动态效果和数据处理。 - **上传预览**：指的是文件上传前在客户端进行本地预览的功能。 - **图片**：指的是处理对象为图片文件。 - **兼容ie、ff**：指需要在Internet Explorer和Firefox浏览器中都能正常工作的兼容性实现。 #### fileUpload压缩包子文件的文件名称列表 文件名称列表中的"fileUpload"可能指的是包含了相关JavaScript、CSS和HTML文件的压缩包，这些文件协同工作以实现上述功能。在实际应用中，可能包括了如下的文件： - fileUpload.js：包含JavaScript代码来处理文件上传、图片预览以及浏览器兼容性等问题。 - fileUpload.css：包含样式表定义，用于美化上传界面和图片预览效果。 - fileUpload.html：是用户交互的前端界面，用于让用户选择图片文件，并展示图片预览。 ### 总结： 在实现图片上传和预览功能时，需要考虑前端实现细节，如文件大小、类型和尺寸的校验，以及与不同浏览器的兼容性问题。同时，还需要关注后端的实现，如图片以二进制大对象（BLOB）的形式存储到数据库中。在开发过程中，应当注重用户体验，尽量避免弹窗提示等方式降低用户的使用舒适度，并且确保在不同浏览器环境下，功能都能正常工作。