文件上传的方式很多,这里我采用的是FromData文件上传,可以上传当文件,也可以上传多文件。
jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>视频上传</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link rel="stylesheet" type="text/css"
href="<%=path%>/js_lib/jquery/jquery-easyui-1.3.3/themes/default/easyui.css">
<link rel="stylesheet" type="text/css"
href="<%=path%>/js_lib/jquery/jquery-easyui-1.3.3/themes/icon.css">
<link rel="stylesheet" type="text/css" href="<%=path%>/css/cs2.css">
<script type="text/javascript"
src="<%=path%>/js_lib/jquery/jquery-1.10.2.min.js"></script>
<script type="text/javascript"
src="<%=path%>/js_lib/jquery/jquery-easyui-1.3.3/jquery.easyui.min.js"></script>
<script type="text/javascript"
src="<%=path%>/js_lib/jquery/jquery-easyui-1.3.3/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="<%=path%>/js/privileges.js"></script>
</head>
<body class="easyui-layout">
<div id="tb" style="height:auto">
<table width="99%" align="center" border="1" cellspacing="0" cellpadding="0" class="Ctable">
<tr>
<td class="c10" width="8%">视频文件上传</td>
<td class="category" width="10%" colspan="3">
<form class="form-horizontal" id="uploadForm" method="post" action="" enctype="multipart/form-data">
<input type="file" id="file" name="file" multiple='' />
<input type="button" value="上传" id="submit" onclick="return check()">
</form>
</td>
</tr>
</table>
</div>
</body>
<script type="text/javascript">
function check() {
//mp4 3gp mov
var doc = document.getElementById('file');
for(var i=0;i<doc.files.length;i++){
var name = doc.files[i].name;
var hz = name.substring(name.lastIndexOf(".")+1);
if(hz!="mp4" && hz!="3gp" && hz!="mov" && hz!="MP4" && hz!="3GP" && hz!="MOV"){
$.messager.alert("错误信息","请上传mp4、3gp、mov视频格式!!",'error');
return false;
}
}
upload();
}
function upload(){
var formData = new FormData($('#uploadForm')[0]);
$.ajax({
type: 'post',
url: "<%=path%>/shipin/ftpupload.do",
data: formData,
cache: false, //是否在缓存中读取数据的读取
processData: false, //用于对data参数进行序列化处理
contentType: false, //发送信息至服务器时内容编码类型,上传文件时设置为false
}).success(function (data) {
if(data==0){
$.messager.alert("提示信息","上传成功!",'info',function(){});
}else if(data==1){
$.messager.alert("错误信息","上传失败!",'error',function(){});
}else{
$.messager.alert("错误信息","请选择需要上传的文件!",'error',function(){});
}
});
}
</script>
</html>
action
package com.znh_sz.shipin.action;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;
import com.znh_sz.shipin.dao.ShipinDao;
@Controller
@RequestMapping("/shipin")
public class SpAction {
//文件上传
@RequestMapping("/ftpupload")
@ResponseBody
public String ftpupload(@RequestParam("file") MultipartFile[] file,HttpServletRequest request,
HttpServletResponse response){
String fileName = file[0].getOriginalFilename().trim();
if(fileName.equals("")){ //如果第一个文件名为空,则表示用户未选择文件
return "2"; //未选择文件
}
ShipinDao dao = new ShipinDao();
return dao.ftpupload(file,request,response);
}
}
在开发的过程中遇到的BUG:
在这个项目以前我一直以为ajax是不能传文件,要传文件只能是form表单的形式。但form是没有回调函数的,如要前台需要后台传过来的状态码就很麻烦了,就需要用到 ajaxSubmitForm()之类的方法,但要调用这个方法是需要引入jquery.form.js,而且使用还很麻烦。查过很多资料后发现FormData也能传文件,直接毫不犹豫的换方法。
在开发的过程中磕磕绊绊的踩了很多坑,下面就说说那些坑:
1.check()方法中提示框闪了一下就没了:
原因:form表单的onclick中没有写return。导致接不到check传过来的false,form表单会直接提交(即刷新页面),所以刚出来的提示框也被刷新掉了。
错误代码:
<form class="form-horizontal" id="uploadForm" method="post" action="" enctype="multipart/form-data">
<input type="file" id="file" name="file" multiple='' />
<input type="submit" value="上传" id="submit" onclick="check()">
</form>
2.ajax方法中提示框闪了一下就没了:
原因:上传按钮设置成了submit类型。在ajax提交调完回调函数后,submit按钮市form表单再次提交,这样刚出现的提示框又被刷新掉了,犹如昙花一现一般。将submit按钮改成button就好。
错误代码:
<form class="form-horizontal" id="uploadForm" method="post" action="" enctype="multipart/form-data">
<input type="file" id="file" name="file" multiple='' />
<input type="submit" value="上传" id="submit" onclick="return check()">
</form>