今天做了个管理后台简单的小功能,是上传两张图片到服务器,然而却遇到了很多的坑,今天把问题解决了,顺便来记录下,以后大家遇到此类问题可以按照此种方式。
前端 ajax+html+BUI(这里考虑到大家用的框架不一样,所以就暂时不贴BUi的相关代码了)
后台spring +mysql
前端界面展示
<html>
<head></head>
<body>
<div class="control-group span8">
<label class="control-label">广告封面地址:</label>
<div class="controls">
<input type="text" class="control-text" name="bannerImg" id="bannerImg" />
</div>
</div>
<div class="control-group span8">
<label class="control-label">广告跳转地址:</label>
<div class="controls">
<input type="text" class="control-text " name="bannerUrl" id="bannerUrl" />
</div>
</div>
<div class="control-group span8">
<label class="control-label label-warning" id="inputTxex"><font color="red">广告封面图片上传:</font></label>
<div class="controls " id="inputType">
<input type="file" class="control-text bannerImgs " id="handInputIdHold1" />
</div>
</div>
</body>
</html>
前端ajax处理 (可适当修改下返回data,根据自己的返回数据定义判断)
function upload() {
//var formData = new FormData($("#uploadFile"));
var formData = new FormData();
formData.append("handInputIdHold1", document.getElementById("handInputIdHold1").files[0]);
formData.append("handInputIdHold2", document.getElementById("handInputIdHold2").files[0]);
jQuery.ajax({
type: 'POST',
url: "uploadFile",
data: formData,
contentType: false,
processData: false,
complete: function(data) {
var json = eval("(" + data.responseText + ")") if (json.rescode == "success") { // 上传成功
BUI.Message.Alert('上传成功!');
var imgs = json.fileName;
if (imgs.trim() != '') {
var arr = imgs.split(';');
//根据class 名称来赋值input标签的值
//我这边是先上传,然后回显示值,赋值到标签上,然后再去提交所有的form
$(".bannerImgs").val(arr[0]);
$(".bannerUrls").val(arr[1]);
}
// search.load();
} else { // 上传失败
BUI.Message.Alert('保存失败!');
}
}
});
}
后端Java接收
BannerController.java
@RequestMapping("/uploadFile")
public String uploadFile(HttpServletRequest request) throws JsonProcessingException {
Map<String, Object> file = null;
try {
file = bannerService.upladImage(request);
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return JsonUtil.obj2Json(file, true);
}
BannerService.java
public Map<String, Object> upladImage(HttpServletRequest request) throws Exception {
String fileName = "";
System.out.println(request.getParameter("handInputIdHold1"));
MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
Map<String, Object> mapRestult = new HashMap<String, Object>();
try {
String path = fileImgPathForWin(multipartRequest);
System.out.println(path);
// 广告封面
MultipartFile cover = multipartRequest.getFile("handInputIdHold1");
// 广告跳转
MultipartFile jump = multipartRequest.getFile("handInputIdHold2");
if (cover != null) {
cover.transferTo(new File(path + cover.getOriginalFilename()));
fileName += cover.getOriginalFilename() + ";";
}
if (jump != null) {
jump.transferTo(new File(path + jump.getOriginalFilename()));
fileName += jump.getOriginalFilename();
}
mapRestult.put("rescode", "success");
mapRestult.put("fileName", fileName);
} catch (IllegalStateException e) {
// TODO Auto-generated catch block
mapRestult.put("rescode", "faled");
mapRestult.put("fileName", "");
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return mapRestult;
}
fileImgPathForWin 方法
/**
* 生成文件目录 windows
*
* @throws Exception
*/
protected String fileImgPathForWin(HttpServletRequest request) throws Exception {
// String files =littype + DateUtil.DateToString(new Date(),
// DateStyle.yyyyMMddHHmmssSSS) + excelversion;
String files = request.getSession().getServletContext().getRealPath("/") + "\\" + "excel" + "\\"
+ DateUtil.DateToString(new Date(), DateStyleEnum.YYYY_MM_DD) + "\\";
File folder = new File(files);
if (!folder.exists()) {
folder.mkdirs();
}
return files;
}
好了,基本上流程就是这样,大家有什么疑问可以回复我,一起学习进步。