ie8 springmvc图片上传预览_springmvc 图片预览-CSDN博客

本文链接：https://blog.csdn.net/yinyichao0107/article/details/54177633

开始设想使用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>

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

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

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

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

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

</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页

</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;
}