FormData多文件上传（二）

最新推荐文章于 2024-05-24 00:19:06 发布

小雨封山

最新推荐文章于 2024-05-24 00:19:06 发布

阅读量1.6k

点赞数

分类专栏： spring 文章标签：文件上传 BUG

本文链接：https://blog.csdn.net/CloseMountain/article/details/82458620

版权

spring 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文件上传的方式很多，这里我采用的是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
评论
FormData多文件上传（二）

文件上传的方式很多，这里我采用的是FromData文件上传，可以上传当文件，也可以上传多文件。jsp&lt;%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%&gt;&lt;% String path = request.getContextPath(); String basePath = requ...
复制链接

扫一扫

专栏目录