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

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

ServletFileUpload的依赖库链接:
https://pan.baidu.com/s/14MfxOghnP-t1Q-sAQDh6kA
提取码:hcyc

前端FormData:

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


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

		if(window.XMLHttpRequest){
			my=new XMLHttpRequest();
		}else{
			try{
				my=new ActiveXObject("Microsoft.XMLHTTP");
			}catch(e){
				my=new ActiveXObject("Msxml12.XMLHTTP");
			}
			}
	<!-- ajax -->
		
		let pp=document.createElement("div");

pp.width="0%";
pp.height="15px";
pp.id="progress";
pp.innerHTML="0%";
pp.style="background:rgba(0,255,0,0.75);box-shadow:0px 0px 50px 0px #fff;border-radius:30px;padding-left:50%"
document.body.appendChild(pp);
<!-- 进度条 -->

let progress=document.getElementById("progress");

my.onreadystatechange=function(){
	if(my.readyState==4&&my.status==200){
		progress.width="100%";
		progress.innerHTML="100%";
		alert(my.responseText);
		progress.remove();
	}
};
<!-- 传输成功 -->


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

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

后端处理:

package PCServlet;

import java.io.File;
import java.io.IOException;
import java.io.InputStream;
import java.util.ArrayList;
import java.util.Iterator;
import java.util.List;
import java.util.Properties;
import java.util.UUID;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileItemFactory;
import org.apache.commons.fileupload.FileUploadException;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;

/**
 * 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 {
		request.setCharacterEncoding("utf-8");
		response.setContentType("text/html;charset=utf-8");
		
	
		String hasMultipart=""; //是否携带附件
		
		File file=null;
		FileItem fileitem=null;
		String s=UUID.randomUUID().toString().replaceAll("-", "");
		String UUID=s;
		
		boolean bb=ServletFileUpload.isMultipartContent(request);
		<!-- 判断是否有enctype="multipart/form-data" -->
		if(bb) {
		FileItemFactory factory=new DiskFileItemFactory();
		ServletFileUpload load=new ServletFileUpload(factory);
		try {
			List<FileItem> list=load.parseRequest(request);
			<!-- 解析请求 -->
			
			Iterator<FileItem> it=list.iterator();
			while(it.hasNext()) {
				FileItem item=it.next();
				if(item.isFormField()) {
					<!-- 判断是否是普通表单字段 -->
					
					String fieldName=item.getFieldName();
<!-- 表单字段名 -->

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

					name=name.substring(name.lastIndexOf("/")+1);
					hasMultipart=name;
					InputStream in=PCMessageReceiver.class.getClassLoader().getResourceAsStream("properties/uploadPath.properties");
					Properties p=new Properties();
					p.load(in);
					String path=(String)p.get("upload");
<!-- 文件保存路径 -->

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

}

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

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值