1、首先,jsp页面得引入
<script type="text/javascript" src="${ctx}/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="${ctx}/js/jquery.form.js"></script><script type="text/javascript" src="${ctx}/js/ajaxfileupload.js"></script>
2、spring配置文件中,添加
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"/>
3、自己的上传业务类代码
@Controller
@RequestMapping(value = "/upload")
public class UploadController {
Logger log = Logger.getLogger(UploadController.class);
@RequestMapping(value="/uploadFile")
@ResponseBody
public String uploadFile(@RequestParam(value = "file", required = false) MultipartFile file,HttpServletRequest request){
JSONObject json = new JSONObject();
json.put("success", false);
try
{
log.info("开始上传附件");
//String path = request.getSession().getServletContext().getRealPath("upload") + "\\"+this.createFolderName();
String path = QRCodeUtil.class.getResource("/").getPath();
path = path.substring(0, path.indexOf("/WEB-INF/"))
+ File.separatorChar + "upload"+ "/"+this.createFolderName();
String fileRealName = file.getOriginalFilename();
String serverFileName = this.createAttachmentId() + fileRealName.substring(fileRealName.lastIndexOf("."));
log.info("附件上传至=="+path+" 附件serverFileName="+serverFileName);
File targetFile = new File(path, serverFileName);
if (!targetFile.exists())
{
targetFile.mkdirs();
}
//保存
file.transferTo(targetFile);
json.put("fileUrl",path + serverFileName);
json.put("fileRealName", fileRealName);
json.put("serverFileName", serverFileName);
json.put("success", true);
} catch (Exception e)
{
log.error("上传附件异常!",e);
}
log.info(json.toString());
return json.toString();
}
private String createFolderName() {
Calendar calendar = Calendar.getInstance();
calendar.setTime(new Date());
String folderName = calendar.get(Calendar.YEAR) + "/";
folderName += this.getDoubleStr((calendar.get(Calendar.MONTH) + 1), 2) + "/";
folderName += this.getDoubleStr(calendar.get(Calendar.DAY_OF_MONTH), 2) + "";
return folderName;
}
private String createAttachmentId()
{
Calendar calendar = Calendar.getInstance();
calendar.setTime(new Date());
StringBuffer attachmentId = new StringBuffer(calendar.get(Calendar.YEAR));
attachmentId.append(this.getDoubleStr((calendar.get(Calendar.MONTH) + 1), 2)).append("");
attachmentId.append(this.getDoubleStr(calendar.get(Calendar.DAY_OF_MONTH),2)).append("");
attachmentId.append(this.getDoubleStr(calendar.get(Calendar.HOUR_OF_DAY), 2)).append("");
attachmentId.append(this.getDoubleStr(calendar.get(Calendar.MINUTE), 2)).append("");
attachmentId.append(this.getDoubleStr(calendar.get(Calendar.SECOND), 2)).append("");
attachmentId.append(this.getDoubleStr(calendar.get(Calendar.MILLISECOND), 3)).append("");
attachmentId.append(this.getDoubleStr(new Random().nextInt(10000), 4));
return attachmentId.toString();
}
private String getDoubleStr(int value, int num)
{
String str = value + "";
for (int i = 0; i < (num - str.length()); i++)
{
str = "0" + str;
}
return str;
}
4、jsp页面:
<form id="uploadForm" method="post" enctype="multipart/form-data">
<div>
<input type="file" id="file" name="file" readOnly/>
<a href="javascript:void(0)" οnclick="uploadFile()" >上传</a>
<span id="noFileInfo" style="display:none;">请选择要上传的附件</span>
</div>
<!--/未选择照片状态-->
</form>
5、js:
function uploadFile(){
if ($("#file").val() == "") {
$("#noFileInfo").show();
} else {
$("#noFileInfo").hide();
$("#uploadForm").ajaxSubmit({
type:'post',
secureuri: false, //一般设置为false
fileElementId: 'file',
url:ctx+"/upload/uploadFile",
dataType:"JSON",
clearForm: true,//是否清空form
success: function (data, status) {
var test = eval("(" + data + ")");
//alert(test.success);
var item = "";
if(test.success){
alert("success");
} else {
alert("error");
}
},
error: function(data, status, e){
alert(status);
alert(data.responseText);
alert(e);
}
});
}
}
这样就实现上传了。
遇到问题:
我在实现该功能是,一直有一个问题,就是附件都上传了,但是ajaxSubmit一直执行error function,通过alert(e),提示缺少 $.httpData 方法,在jquery.form.js中添加了:
$.httpData=function( xhr, type, s ) {
var ct = xhr.getResponseHeader( 'content-type'), xml = type == 'xml' || !type && ct && ct.indexOf( 'xml' ) >=0, data = xml ? xhr.responseXML: xhr.responseText; if ( xml && data.documentElement.tagName == 'parsererror' )
throw 'parsererror' ; if ( s && s.dataFilter ) data = s.dataFilter( data, type );if ( typeof data === 'string' ){if ( type == 'script' ) jQuery.globalEval( data ); if ( type == 'json' )
data = window[ "eval" ]( '(' + data + ')' ); } return data; };
$.handleError= function (s, xhr, status, e) {
if (s.error) {
s.error.call(s.context || s, xhr, status, e); }
if (s.global) {
(s.context ? jQuery(s.context) : jQuery.event).trigger('ajaxError', [xhr, s, e]); }
}
})(jQuery);
就可以了。