FormData多文件上传(二)

文件上传的方式很多,这里我采用的是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>

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值