Spring MVC 上传图片无刷新预览

Spring Mvc 上传图片 我早期写在了 360图书馆 ,就不移过来了.

地址http://www.360doc.com/content/14/1226/11/17181183_435868225.shtml

无刷新上传 jsp页面代码.使用的是ajaxFileUpload插件.

先简单介绍一下ajaxFileUpload ,这个插件仅7KB .用起来也特别简单.

如果不是用在特别复杂的地方上应该不会出现什么bug

代码如下:

HTML代码:

1  <input type="file" id="btnFile" name="imgFile" hidden="hidden" />
2                 <span><a href="javascript:void (0)" onclick="saveImg();" style="width:100px;">上传</a></span>

JavaScript代码:

 1 function saveImg(){
 2         $("#btnFile").click();
 3         $("#btnFile").change(function(){
 4             uploadImg();
 5         })
 6     }
 7     function uploadImg(){
 8         if($("#btnFile").val()!=""){
 9             $.ajaxFileUpload
10             (
11                     {
12                         url: ‘${pageContext.request.contextPath}/kindEditorController/saveImg‘, //用于文件上传的服务器端请求地址
13                         secureuri: false, //是否需要安全协议，一般设置为false
14                         fileElementId: ‘btnFile‘, //文件上传域的ID
15                         dataType: ‘json‘, //返回值类型 一般设置为json
16                         success: function (data, status)  //服务器成功响应处理函数
17                         {
18                             if(data.error==0){
19                                 $(‘.contentDiv‘).html("<img src=‘"+data.url+"‘ width=‘290px‘ height=‘160px‘/>");
20                             }else{
21                                 $.messager.alert("错误",data.message,‘error‘);
22                             }
23                         },
24                         error: function (data, status, e)//服务器响应失败处理函数
25                         {
26                             $.messager.alert("错误","网络忙,请稍后再试.",‘error‘);
27                         }
28                     }
29             )
30             return false;
31         }