最近在做人脸库添加修改等功能，其中有一个功能就是人脸图片的上传和预览，这边就遇到的问题做一下简单的记录。（自己也是在网上搜索别人的方法，再加上一些自己整理）
先看一下效果： 
上传
使用的插件：jquery.
原因：对于高级浏览器，可以利用formData和xmlHttpRequest2.0使用ajax进行图片等文件上传；对于低级浏览器，需要使用iframe配合form表单提交来模拟ajax提交；正好兼容了两者。
使用方法：
链接
（下面是比较基础的）
var options = {
type : 'post',
url : url,
clearForm : false, //成功提交后，清除所有表单元素的值
resetForm : false, //成功提交后，重置所有表单元素的值，即恢复到页面加载时的状态
cache : false, //无缓存
async : true, //异步
//序列化提交数据之前的回调函数
beforeSerialize : function () {},
//提交前执行的回调函数
beforeSubmit : function (xhr) {}, //这里主要是用于提交前的数据校验，返回false即可阻止提交
//服务器端返回处理逻辑
success : function (data) {},
//提交失败时执行
error : function (xhr, textStatus, errorThrown) {},
};
$('#faceLibraryForm').ajaxSubmit(options);
return false;
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
原理：低级浏览器是利用将form表单的target指向iframe，使得在提交表单(submit)的时候实现无刷新的效果，然后读取iframe中的内容，实现获取服务器端返回信息等功能；这些在高级浏览器中就是ajax来完成的。
<iframe id="hideFrame" name="hideFrame" style="display: none;"></iframe>- 1
在这里遇到了一个问题，是关于图片上传的
当在进行修改操作的时候如果没有进行图片修改的话，则表单中img的值会为空，但是在高级浏览器中服务器端会解析错误。
后面看源码发现高级浏览器是用的formdata接口去添加数据，当数据为空的时候传的也是空，导致图片上传的信息中的content-type没有去指定，服务器端解析错误（其实我个人觉得这个地方服务器端完全可以自己去解决的），所以我们还是从源码入手，稍微修改一下：
:1007行
//({ name: n, value: '', type: el.type });
/*modify by liuzj 当传递空文件的时候通过抓包后台解析不成功，是因为少了content-type*/
a.push({ name: n, value: new Blob([], {type:'application/octet-stream'}), type: el.type }); - 1
- 2
- 3
改完后的抓包图： 
预览
最简单的预览方式就是当用户在选择完上传图片后，给img的src属性赋值此图片的路径，即可实现预览功能，但是需要考虑到下面两个情况；
1.添加信息时的上传图片预览
2.修改信息时的所见信息中图片的预览
第一个问题是由于IE保护原则，不论是什么路径上传的文件，在获取路径的时候都变成了”C:\fakepath\”+文件名的形式（服务器上测试，本地获取还是正确的路径）
解决办法：
IE8这种就用filter属性，把图片当成背景，高级浏览器就获取图片的base64编码进行展示
if (document.all) {//低版本IE
imgFile.select();
path = document.selection.createRange().text;
document.getElementById("imgShowDiv").innerHTML = "";
document.getElementById("imgShowDiv").style.filter = "progid:(enabled='true',sizingMethod='scale',src=\"" + path + "\")"; //使用滤镜效果
} else {//高版本IE
path = window.URL.createObjectURL(imgFile.files[0]);
$("#imgShowDiv").html("<img id='showImg' width='180px' height='150px' src='" + path + "'/>");
}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
第二个问题是当你去修改信息的时候，所见信息中的图片不能跟添加图片一样，因为这个图片并不一定存在于你的电脑，你无法获取其信息进行展示。所以，这里可以用baes64进行展示，但是用base64又会存在一个问题，那就是IE8上，base64图片信息大小不能超过32K，否则会显示不完全。
综上所述，当我去点击修改信息的时候，图片信息的展示还是使用服务器提供的图片url地址，去服务器获取此图片的信息去进行展示。