一般文件上传都是用到ajaxFileUpload插件,但是这些插件会受很多限制,比如你不能在controller中用一个对象去接受其他正常的表单参数,这样就会造成表单自动封装失效。还有的插件不支持其他参数提交,总之用ajaxFileUpload受到的限制太多。用原生的ajax文件表单提交,它有一个缺点就是只支持fireFox还有chrome等比较高级的浏览器。但是它的优势又是明显的 接下去废话不多说。
1.首先看一下界面表单提交,因为我这边是用velocity模板引擎来做的界面,所以导入一些静态文件的方式也有所不一样,但是要达到表单提交,只需要有jquery.js还有你自己写的upload.js(这个命名最好根据业务来命名),还有就是你自己要是有css也要引进来,我这边就贴我自己的一个例子(任务积分添加),我这边的boostrap的js和css是在外层引进的。
界面gameTaskCreate.vm
<link href="$request.contextPath/assets/css/addGood.css" rel="stylesheet" type="text/css">
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">新增任务</h1>
</div>
</div>
<div class="panel panel-default" style="max-width:960px;margin:auto;">
<div class="panel-heading">请填写任务基本信息</div>
<div class="panel-body detail-wrapper">
<form id="gametask-form" class="form" data-submit-url="$!{request.contextPath}/gametask/saved" data-success-url="$!{request.contextPath}/gametask/list" >
<div class="row">
<div class="col-md-3 detail-label text-right">任务名:</div>
<div class="col-md-4 " >
<input class="form-control" name="taskName" id="taskName" placeholder="请输入任务名"/>
</div>
</div>
<div class="row">
<div class="col-md-3 detail-label text-right">获得积分:</div>
<div class="col-md-4 " >
<input class="form-control" name="getScores" placeholder="请输入积分数量" id="getScores" />
</div>
</div>
<div class="row">
<div class="col-md-3 detail-label text-right">任务描述:</div>
<div class="col-md-4 " >
<input class="form-control" name="taskDesc" id="taskDesc" placeholder="请输入任务描述"/>
</div>
</div>
<div class="row">
<div class="col-md-3 detail-label text-right">任务类型:</div>
<div class="col-md-4 " >
<select name="type" id="type" class="form-control">
<option value="">请选择</option>
<option value="1">每日任务</option>
<option value="2">进阶任务</option>
<option value="3">其他任务</option>
</select>
</div>
</div>
<div class="row">
<div class="row">
<div class="col-md-3 detail-label text-right">最高奖励次数:</div>
<div class="col-md-4 " >
<input class="form-control" name="maxNum" id="maxNum" placeholder="请输入最高奖励次数" />
</div>
</div>
<div class="row">
<div class="col-md-3 detail-label text-right">任务代码:</div>
<div class="col-md-4 " >
<input class="form-control" name="taskCode" id="taskCode" placeholder="请输入任务代码"/>
</div>
</div>
<div class="col-md-3 detail-label text-right" >图片选择:</div>
<div class="col-md-4 " >
<input class="form-control" name="imgUrl" type="file" size="40" maxlength="40" id="imgUploader" >
</div>
<div class="col-md-4 " id="preview">
</div>
</div>
<div class="row">
<div class="col-md-3 detail-label text-right">跳转url:</div>
<div class="col-md-4 " >
<input class="form-control" name="skipUrl" id="skipUrl" placeholder="请输入跳转url"/>
</div>
</div>
<div class="row">
<div class="col-md-3 detail-label text-right">排序字段:</div>
<div class="col-md-4 " >
<input class="form-control" name="sort" id="sort" placeholder="请输入排序字段" />
</div>
</div>
</div>
<div class="row">
<div class="col-md-3 detail-label text-right">使用状态:</div>
<div class="col-md-4 " >
<select name="status" id="status" class="form-control">
<option value="">请选择</option>
<option value="0">上架</option>
<option value="1">下架</option>
</select>
</div>
</div>
<div class="row">
<div>
<a id="submitBtn" href="javascript:void(0);" class="btn btn-primary">提交</a>
</div>
</div>
</form>
</div>
</div>
#importJavascript("${request.contextPath}/assets/libs/underscore/1.8.3/underscore-min.js")
#importJavascript("${request.contextPath}/assets/libs/backbone/1.2.0/backbone-min.js")
#importJavascript("$request.contextPath/assets/js/**.js")
我们自己编写的js文件(create_gametask.js)
$(function() {
$('#submitBtn').click(function() {
var $form = $('#gametask-form');
var fileBannerImg=$('#imgUploader')[0].files[0];
// 异步上传图片
var formData = new FormData();
formData.append('imgTempUrl', fileBannerImg);
formData.append('taskName', $('#taskName').val());
formData.append('getScores', $('#getScores').val());
formData.append('taskDesc', $('#taskDesc').val());
formData.append('maxNum', $('#maxNum').val());
formData.append('type', $('#type').val());
formData.append('taskCode', $('#taskCode').val());
formData.append('skipUrl', $('#skipUrl').val());
formData.append('sort', $('#sort').val());
formData.append('status', $('#status').val());
$.ajax({
url : $form.data('submit-url'),
type : 'post',
dataType : 'json',
data : formData,
success : function(data){
if(data=='success'){
alert("恭喜任务添加成功!");
window.location.href = $form.data('success-url');
}
},
error:function(){
alert("抱歉任务添加失败!");
},
contentType: false,
processData: false
});
});
});
//图片格式的检测
$('#imgUploader').change(function() {
var filetypes=["/png","/jpg","/jpeg","/bmp","/tga","/psd","/svg"];
var file = this.files[0];
<span style="white-space: pre;"> </span>var type = file.type;
for(var i = 0 ; i < filetypes.length ; i++){
<span style="white-space: pre;"> </span>if(filetypes[i]==type.substr(type.lastIndexOf("/")).toLowerCase()){
<span style="white-space: pre;"> </span> console.log(file.type);
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function() {
var url = reader.result;
console.log(url);
$('#preview').css({
'background-image': 'url('+ url +')'
}).show();
<span style="white-space: pre;"> </span>};
return ;
}
}
alert("文件格式有誤,請重新輸入");
document.getElementById("imgUploader").value="";
});
//积分数量数字监控
$("#getScores").blur(function(){
var reg = new RegExp("^[0-9]*$");
var obj = document.getElementById("getScores");
if(!reg.test(obj.value)){
alert("请输入数字!");
document.getElementById("getScores").value="";
}
});
$("#maxNum").blur(function(){
var reg = new RegExp("^[0-9]*$");
var obj = document.getElementById("maxNum");
if(!reg.test(obj.value)){
alert("请输入数字!");
document.getElementById("maxNum").value="";
}
});
$("#sort").blur(function(){
var reg = new RegExp("^[0-9]*$");
var obj = document.getElementById("sort");
if(!reg.test(obj.value)){
alert("请输入数字!");
document.getElementById("sort").value="";
}
});</span>
我们自己编写的css文件(addGameTask.css),这边我是用来(针对)控制显示图片大小的
#preview {
display: none;
width: 100px;
height: 100px;
border: 1px solid red;
background-size: cover;
}
我们的控制层文件,这边用的post提交,在控制层中用一个GameTask对象接受其他参数,然后文件另存,在服务器上,上传路径和显示路径不同,如果你用了代理。我这边用了代理,所以上传的路径和数据库存取的路径有所不同。
import java.io.File;
import java.io.IOException;
import java.util.Iterator;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.validation.Valid;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.multipart.MultipartHttpServletRequest;
import org.springframework.web.multipart.commons.CommonsMultipartResolver;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Controller;
/**
* @author
* @date 2015年12月03日 上午16:51:54
*/
@Controller
public class GameTaskController {
private static Logger log = LoggerFactory.getLogger(GoodsController.class);
@Autowired
private GameTaskService gameTaskService;
@Value("${upload.image.adresse}")
private String uploadImageAdresse;
@Value("${upload.image.url}")
private String uploadImageUrl;
//返回用户列表界面
@RequestMapping(value="/gametask/list")
public String listGameTaskInfo(Model model){
model.addAttribute("gametaskList", gameTaskService.getGameTaskList());
return "gametask/gametaskList";
}
//返回"success字串",前端在用跳转方式跳转到list那边去
@ResponseBody
@RequestMapping(value="gametask/saved",method = RequestMethod.POST)
public String saveGameTaskInfo(HttpServletRequest request,GameTask gameTask){
CommonsMultipartResolver multipartResolver = new CommonsMultipartResolver(request.getSession().getServletContext());
//判断 request 是否有文件上传,即多部分请求
if(multipartResolver.isMultipart(request)){
//转换成多部分request
MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest)request;
//取得request中的所有文件名
Iterator<String> iter = multiRequest.getFileNames();
while(iter.hasNext()){
String str = iter.next();
//取得上传文件
MultipartFile file = multiRequest.getFile(str);
String filePath = "";
if(file != null){
// 重命名上传后的文件名
String timeString = "FINANCE"+ System.currentTimeMillis() + "";
String[] fileStrings= file.getOriginalFilename().split("\\.");
String path=uploadImageAdresse + timeString+ "." + fileStrings[1];
filePath = uploadImageUrl + timeString+ "." + fileStrings[1];
log.info("============"+path);
File localFile = new File(path);
try {
file.transferTo(localFile);
} catch (IllegalStateException e) {
log.error("图片上传失败!", e);
} catch (IOException e) {
log.error("图片上传失败!", e);
}
gameTask.setImgUrl(filePath);
}
}
}
if(gameTaskService.addGameTaskInfo(gameTask)){
return "success";
}
return "false";
}
}