首页 > 代码库 > Spring MVC 上传图片无刷新预览

Spring MVC 上传图片无刷新预览

2024-11-14 14:50:02   203人阅读

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             $.ajaxFileUpload10             (11                     {12                         url: ‘${pageContext.request.contextPath}/kindEditorController/saveImg‘, //用于文件上传的服务器端请求地址13                         secureuri: false, //是否需要安全协议，一般设置为false14                         fileElementId: ‘btnFile‘, //文件上传域的ID15                         dataType: ‘json‘, //返回值类型 一般设置为json16                         success: function (data, status)  //服务器成功响应处理函数17                         {18                             if(data.error==0){19                                 $(‘.contentDiv‘).html("<img src=http://www.mamicode.com/‘"+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         }

 

Spring MVC 上传图片无刷新预览


联系
我们