前端----实现图片上传与预览（兼容IE8）

最新推荐文章于 2025-07-12 14:09:35 发布

Muscle_Mliu

最新推荐文章于 2025-07-12 14:09:35 发布

阅读量8.2k

点赞数 3

CC 4.0 BY-SA版权

分类专栏：前端工作记录

本文链接：https://blog.youkuaiyun.com/liuzijiang1123/article/details/80838637

本文记录了在前端实现图片上传和预览功能的实践经验，特别针对IE8浏览器的兼容性问题进行了探讨。使用jquery.form.js插件，通过ajax或form表单提交实现无刷新上传。在高级浏览器中，因为空图片字段导致服务器端解析错误，通过修改源码解决了问题。预览部分，针对IE8的路径问题使用filter属性，而其他浏览器则使用base64编码。在修改信息时，为避免IE8的base64大小限制，选择使用服务器URL获取图片进行预览。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近在做人脸库添加修改等功能，其中有一个功能就是人脸图片的上传和预览，这边就遇到的问题做一下简单的记录。（自己也是在网上搜索别人的方法，再加上一些自己整理）

先看一下效果：
这里写图片描述

上传

使用的插件：jquery.form.js

原因：对于高级浏览器，可以利用formData和xmlHttpRequest2.0使用ajax进行图片等文件上传；对于低级浏览器，需要使用iframe配合form表单提交来模拟ajax提交；正好jquery.form.js兼容了两者。

使用方法：
链接
（下面是比较基础的）

var options = {
           type : 'post',
           url : url,
           clearForm : false, //成功提交后，清除所有表单元素的值
           resetForm : false, //成功提交后，重置所有表单元素的值，即恢复到页面加载时的状态
           cache :