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图片回显问题

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Spring MVC是一个基于Java的开源框架,用于构建Web应用程序。它采用了MVC(Model-View-Controller)的架构模式,可以让开发人员更容易地分离关注点并实现高效的代码组织。 在Spring MVC中实现图片的上传和下载是相对简单的。下面是一个简单的步骤说明: 1. 图片上传: 首先,需要在Spring MVC的配置文件中配置一个用于上传文件的MultipartResolver。然后,创建一个Controller方法用于处理文件上传请求。在这个方法中,可以通过HttpServletRequest对象获取上传的文件,并以合适的方式保存到服务器上,例如保存到本地文件系统或将其存储到数据库中。 2. 图片下载: 为了实现图片下载功能,需要创建一个用于处理下载请求的Controller方法。在这个方法中,可以根据请求参数获取图片的存储路径或ID,并根据这个信息获取图片的数据。然后,可以将图片数据写入HttpServletResponse对象的输出流中,从而实现将图片发送给客户端进行下载的功能。 需要注意的是,在处理图片上传和下载的过程中,可能需要对上传的文件大小进行限制,并进行一些安全性的校验,以防止恶意文件上传或下载。 总结起来,Spring MVC可以通过配置MultipartResolver实现图片的上传功能,并通过Controller方法处理上传和下载请求,将图片保存或发送给客户端。通过这些步骤的实现,可以实现方便可靠的图片上传和下载功能。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值