SpringMVCはajaxfileupladファイルと合わせて更新なしでアップロードします.
jQueryはajaxのファイルアップロードを提供していません.ajaxfileupladを通じてajaxファイルのアップロードができます.実はajaxfileuploadファイルをアップロードするのはとても簡単です.SpringMVCでajaxファイルのアップロードを実現することを実証します.
1、バックグラウンド受信コード
まず、springのプロファイルにファイルアップロードプロファイルを追加します.
ajaxfileuploadを使う時、まずajaxfileupladファイルをダウンロードして、対応するjsファイルを導入します.
実は簡単です
1、バックグラウンド受信コード
まず、springのプロファイルにファイルアップロードプロファイルを追加します.
<!-- -->
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<property name="defaultEncoding" value="UTF-8"/>
</bean>
ファイル受信のコードを書き込みます.package org.andy.controller;
import java.io.File;
import java.io.IOException;
import java.util.Arrays;
import java.util.Date;
import java.util.HashMap;
import javax.servlet.ServletContext;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
import org.apache.log4j.Logger;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.multipart.commons.CommonsMultipartFile;
@Controller
@RequestMapping("/upload")
public class UploadController {
private static final Logger LOG = Logger.getLogger(UploadController.class);
private static final HashMap<String, String> TypeMap = new HashMap<String, String>();
static {
TypeMap.put("image", "gif,jpg,jpeg,png,bmp");
TypeMap.put("flash", "swf,flv");
TypeMap.put("media", "swf,flv,mp3,wav,wma,wmv,mid,avi,mpg,asf,rm,rmvb");
TypeMap.put("file", "doc,docx,xls,xlsx,ppt,pptx,htm,html,txt,dwg,pdf");
}
/**
*
*
* @param file
* @param request
* @return message: -1 0 1 2 3 4 5
*
*
*/
@RequestMapping(value = "/imageUpload", method = RequestMethod.POST)
public void imageUpload(
@RequestParam("file") CommonsMultipartFile file,
@RequestParam(required = false) String filePre, HttpServletRequest request, HttpServletResponse response) {
LOG.info("file name is :" + file.getOriginalFilename());
if (!file.isEmpty()) {
ServletContext servletContext = request.getSession()
.getServletContext();
String uploadPath = servletContext.getRealPath("/")
+ "uploadImage/";
//
long fileSize = 3 * 1024 * 1024;
if (file.getSize() > fileSize) {
backInfo(response, false, 2, "");
return;
}
String OriginalFilename = file.getOriginalFilename();
String fileSuffix = OriginalFilename.substring(
OriginalFilename.lastIndexOf(".") + 1).toLowerCase();
if (!Arrays.asList(TypeMap.get("image").split(",")).contains(
fileSuffix)) {
backInfo(response, false, 3, "");
return;
}
if (!ServletFileUpload.isMultipartContent(request)) {
backInfo(response, false, -1, "");
return;
}
//
File uploadDir = new File(uploadPath);
if (!uploadDir.isDirectory()) {
if (!uploadDir.mkdir()) {
backInfo(response, false, 4, "");
return;
}
}
//
if (!uploadDir.canWrite()) {
backInfo(response, false, 5, "");
return;
}
//
String newname = "";
if(null != filePre){
newname += filePre;//
}
newname += DateFormater.format(new Date(),
DateFormater.DATETIME_PATTERN) + "." + fileSuffix;
File saveFile = new File(uploadPath, newname);
try {
file.transferTo(saveFile);
backInfo(response, true, 0, newname);
} catch (Exception e) {
LOG.error(e.getMessage(), e);
backInfo(response, false, 1, "");
return;
}
} else {
backInfo(response, false, -1, "");
return;
}
}
//
private void backInfo(HttpServletResponse response, boolean flag, int message,
String fileName) {
String json = "";
if (flag) {
json = "{ \"status\": \"success";
} else {
json = "{ \"status\": \"error";
}
json += "\",\"fileName\": \"" + fileName + "\",\"message\": \"" + message + "\"}";
try {
response.setContentType("text/html;charset=utf-8");
response.getWriter().write(json);
} catch (IOException e) {
LOG.error(e.getMessage(), e);
}
}
}
2、フロントでコードを受け取るajaxfileuploadを使う時、まずajaxfileupladファイルをダウンロードして、対応するjsファイルを導入します.
<script type="text/javascript" src="js/ajaxfileupload.js"></script>
ファイル転送フィールドは次のようにfileタイプでなければなりません. <input type="file" id="file" name="file" onchange="ajaxFileUpload();"/>
次にアップロードファイルを処理します. //ajax
function ajaxFileUpload() {
$.ajaxFileUpload({
url : "upload/imageUpload.shtml",
secureuri : false,
data : {
filePre : "feedback",
p : new Date()
},
fileElementId : "file",
dataType : "json",
success : function(data) {
if (data.status == "success") {
//
}
switch(data.message){
//
case "0" : //
break;
case "-1" : //
break;
default: //
break;
}
},
error : function(data) {
//
}
});
}
本論文の出所:http://blog.csdn.net/fengshizty 実は簡単です