ie8 springmvc图片上传预览

开始设想使用input file上传组件，使用js的FileReader进行图片的预览功能，

function upload(){
$("#fileUP").click();
}

function preview(){

var img = document.getElementById('fileXS');
img.width  =  155;
img.height =  155;
  var reader = new FileReader();
reader.onload = function(evt){img.src = evt.target.result;}
reader.readAsDataURL(file.files[0]);

}

<form action="/memberInfo/save" method="post" id="form1" enctype="multipart/form-data">

<input type="button" value="上传照片" class="btn1" style="width:120px; margin:20px 0 0 15px;" οnclick="upload()"/>

<input type="file" οnchange="preview()" style="width:0px;height:0px;" id="fileUP">

<img id="fileXS" src="">

</form>

表单加入enctype="multipart/form-data"在提交表单时可以将图片提交到后台Action中

在chrom中没有问题，但是测试ie8的时候发现ie8不支持FileReader，查询发现从ie10才开始支持html5的FileReader功能

----------------------------------------------------------------------------

修改方法，发现可以使用ie8的滤镜功能实现

IE7和IE8下通过select获取file的图片路径，再用滤镜来显示预览。 

<form action="/memberInfo/save" method="post" id="form1" enctype="multipart/form-data">

<input type="button" value="上传照片" class="btn1" style="width:120px; margin:20px 0 0 15px;" οnclick="upload()"/>

<input type="file" οnchange="preview(this)" style="width:0px;height:0px;" id="fileUP">

<div id="imgPreview">

<img id="fileXS" src="">

</div>

</form>

function preview(file ){

var imgObjPreview=document.getElementById("fileXS");
//IE下，使用滤镜
file.select();
var imgSrc = document.selection.createRange().text;
var localImagId = document.getElementById("imgPreview");
//必须设置初始大小
localImagId.style.width = "155px";
localImagId.style.height = "155px";
//图片异常的捕捉，防止用户修改后缀来伪造图片
try{
localImagId.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
}
catch(e)
{
alert("您上传的图片格式不正确，请重新选择!");
return false;
}
imgObjPreview.style.display = 'none';
document.selection.empty();

｝

这样实现了ie8下图片预览，但是图片上传又遇到了问题，在jquery.form.js 提交表单到后台时，前台页提示jquery.form.js中提示form.submit 拒绝访问，百度得到如下答案

http://blog.csdn.net/jshuanghua/article/details/50751874

意思是ie出于安全的考虑禁止js触发file组件上传文件到后台服务器，可以使用div悬浮file上，在点击div的同时触发冒泡事件解决此问题，但是考虑到客户显示器尺寸不固定等问题，放弃此解决方案

---------------------------------------------------------------------------------------

想到可以使用现成的flash上传组件，找到了uploadify

下载引入jsp页

<script src="/js/uploadify/jquery.uploadify.js"></script>

<style>
.uploadify-queue{ display: none;}
</style>

<form action="/memberInfo/save" method="post" id="form1" >

<img id="fileXS" src="">

<input type="hidden" id="phoCurrent" name="phoCurrent" value="${info.phoCurrent}"/>

<div id="file_upload_1"></div>

</form>

$().ready(function(){
$("#file_upload_1").uploadify({
        height        : 23,
        swf           : '/js/uploadify/uploadify.swf',
        width         : 119,
        buttonImage: '/images/sc.png',
        auto:true,
        multi: false,
        uploader : '/memberInfo/upload',
        fileObjName    : 'file',
        onUploadSuccess : function(file, data, response) {  
        $("#phoCurrent").val(data);
        $("#fileXS").attr("src","data:image/jpeg;base64,"+data);
        }  
    });
})

之前是在表单填写完成时将file和表单对象一起提交到后台，现在改为异步提交file到后台，然后在后台将图片转码为base64传回前台，使用Data URL技术将图片回显，

并将base64码存在前台隐藏域，在表单提交时一起提交到后台保存到数据库里

在测试时发现小图片可以正常回显，但是大图片无法显示，百度发现

发现IE8对base64的解码有限制，如果图片进行64位编码后大于32K，则超过32K的部分不能被解码，ie9以上没有此问题

-------------------------------------------------------------

$("#file_upload_1").uploadify({
        height        : 23,
        swf           : '/js/uploadify/uploadify.swf',
        width         : 119,
        buttonImage: '/images/sc.png',
        auto:true,
        multi: false,
        uploader : '/memberInfo/upload',
        fileObjName    : 'file',
        onUploadSuccess : function(file, data, response) {  
        $("#phoCurrent").val(data);
        $.post("/memberInfo/loadImg",{"base64":data},function(data){
            $("#fileXS").attr("src","/memberInfo/getImg?uuid="+data);
        });
        }  
    });

@RequestMapping(value = "/upload", method = RequestMethod.POST)
@ResponseBody
public String uploadFile(MultipartFile file) {
String out = "999";
InputStream is = null;
try {
if (file != null && !file.isEmpty()) {
is = file.getInputStream();
ByteArrayOutputStream baos = new ByteArrayOutputStream();


byte[] buff = new byte[4096];
int rc = 0;
while ((rc = is.read(buff, 0, 4096)) > 0) {
baos.write(buff, 0, rc);
}
out = Base64Util.getBase64(baos.toByteArray());
baos.close();
is.close();
} else {
out = "201";
}
} catch (Exception e) {
e.printStackTrace();
}
return out;
}

@RequestMapping(value = "/getImg", method = RequestMethod.GET)
@ResponseBody
public void getImg(String uuid) {
HttpSession session = request.getSession();
try {
OutputStream os = response.getOutputStream();
byte[] by = (byte[]) session.getAttribute(uuid);
session.removeAttribute(uuid);
os.write(by);
os.flush();
os.close();
} catch (Exception e) {
e.printStackTrace();
}
}

@RequestMapping(value = "/loadImg", method = RequestMethod.POST)
@ResponseBody
public String loadImg(String base64) {
HttpSession session = request.getSession();
String uuid = UUIDUtil.getUUID32();
byte[] b = Base64Util.toByteBase64(base64);
session.setAttribute(uuid, b);
return uuid;
}

修改回显为，将回显的base64传回后台，后台将接到的base64存进session，然后回传sseionid，在调用sessionid去获取base64转码成2进制流传到前台用于图片回显，至此彻底解决ie8图片回显问题