解决前端FormData对象的后端接收问题

时间:2025-03-20 09:40:46

实现后端对Ajax的FormData对象所传文件的接收

ServletFileUpload的依赖库链接:
/s/14MfxOghnP-t1Q-sAQDh6kA
提取码:hcyc

前端FormData:

<form  method="post" enctype="multipart/form-data"  action="" style=" width: 80%; margin:0 auto;">
	<!-- form要设置 enctype="multipart/form-data",formdata识别标识 -->
	
<label >
     <input type="file"  name="file" style="left:-10030px;position:absolute;">
     <span>附件选择</span>
</label>
<!-- file input渲染 -->


</div>
			<span  style="color:red"></span>
</div>
<!-- 文件名 -->
<button class="layui-btn" lay-submit lay-filter="formDemo" onclick="load()">发布</button>
<!-- 按钮 -->
</form>
		<script type="text/javascript">
	let input=("test1");
	let span=("filename");
	=function(){
		=[0].name;
		<!-- 文件名获取赋值 -->
	}
	
	
	function load(){
		let my;
		
		let form=("form1");
		let data=new FormData(form);
        <!-- 将表单转为对象 -->

		if(){
			my=new XMLHttpRequest();
		}else{
			try{
				my=new ActiveXObject("");
			}catch(e){
				my=new ActiveXObject("");
			}
			}
	<!-- ajax -->
		
		let pp=("div");

="0%";
="15px";
="progress";
="0%";
="background:rgba(0,255,0,0.75);box-shadow:0px 0px 50px 0px #fff;border-radius:30px;padding-left:50%"
(pp);
<!-- 进度条 -->

let progress=("progress");

=function(){
	if(==4&&==200){
		="100%";
		="100%";
		alert();
		();
	}
};
<!-- 传输成功 -->


<!-- 上传中触发 -->
		=function(event){
			if(){<!-- 文件长度是否可计算 -->
				let x=(/)*100;<!-- 已上传大小/总大小 -->
				let x2=(x);<!-- 取整数 -->
				=x2-1+"%";
				=x2-1+"%";
				
			}
			
		}
		
		=function(){
			<!-- 上传完成触发 -->
		}
		('POST','/maven_web/upload',true);
<!-- FormData只能用POST方式 ,并且不能设置RequestHeader-->

		if(confirm("你确定提交吗?")){
			(data);
		}else{
			();
			alert("提交已取消!");
		}
		
		
	}
	
	</script>

后端处理:

package PCServlet;

import ;
import ;
import ;
import ;
import ;
import ;
import ;
import ;

import ;
import ;
import ;
import ;
import ;

import ;
import ;
import ;
import ;
import ;

/**
 * Servlet implementation class A
 */

@WebServlet("/upload")
public class PCMessageReceiver extends HttpServlet {
	
	
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		("utf-8");
		("text/html;charset=utf-8");
		
	
		String hasMultipart=""; //是否携带附件
		
		File file=null;
		FileItem fileitem=null;
		String s=().toString().replaceAll("-", "");
		String UUID=s;
		
		boolean bb=(request);
		<!-- 判断是否有enctype="multipart/form-data" -->
		if(bb) {
		FileItemFactory factory=new DiskFileItemFactory();
		ServletFileUpload load=new ServletFileUpload(factory);
		try {
			List<FileItem> list=(request);
			<!-- 解析请求 -->
			
			Iterator<FileItem> it=();
			while(()) {
				FileItem item=();
				if(()) {
					<!-- 判断是否是普通表单字段 -->
					
					String fieldName=();
<!-- 表单字段名 -->

					switch(fieldName) {
					case "title":title=("utf-8");break;
					case "city":level=("utf-8");break;
					case "class":(("utf-8"));break;
					case "desc":area=("utf-8");break;
					}
					
					// (("utf-8"));
					<!-- 获取value值;必须附上utf-8编码,否则出现中文乱码 -->
					
				}else {
					if(!().isEmpty()) {<!-- 判断是否选择文件 -->
						fileitem=item;
					String name=();
<!-- 获取文件名(完整路径) -->

					name=(("/")+1);
					hasMultipart=name;
					InputStream in=().getResourceAsStream("properties/");
					Properties p=new Properties();
					(in);
					String path=(String)("upload");
<!-- 文件保存路径 -->

					name=(("."));
					 file=new File(path,UUID+name);
					
					
					}
				}
				
				
			}
			
			
		} catch (Exception e) {
			// TODO Auto-generated catch block
			();
		}
		
		}
	
		try {if(fileitem!=null) {
			(file);
			<!-- 保存文件 -->
		}
			
		} catch (Exception e) {
			// TODO Auto-generated catch block
			();
		}
		
	
	}

}

注意:只要使用FormData,那么就只能使用以上方式获取参数,即使没有上传文件