AJAX提交multipart/form-data类型文件到后台以及后台如何获取

一.前端代码
1.htlm代码

<form id="viaBox" method="post" enctype="multipart/form-data">
						<input type="hidden" name="code" class="via_idCode" />
						<img class="user_via" src="<%=basePath%>web/img/default.png"  /> 
						<input type="file" accept="image/*"  name="via_photo" class="via_photo" id="via_photo"  onchange="changeVia()" />
</form>

2.js代码

function changeVia(){
	var reads = new FileReader();
	var img = document.querySelector(".via_photo").files[0];
	if(img.size <= 1024*1024*1){
		reads.readAsDataURL(img);
		reads.onload = function(e){
			document.querySelector(".user_via").src=this.result;//将图片url转成base64
		}
		$.ajax({
			type:"post",
			url:url,
			cache:false,//上传数据不需要缓存
			contentType:false,//已经在表单的entype处声明了multipart/form-data
			processData:false,//data值是FormData对象,不需要对数据做处理
			data:new FormData($("#viaBox")[0]),
			success:function(res){
				console.log(res);
			},
			error:function(err){
				console.log(error);
			}
		})
	}else{
		console.log("上传图片不能超出1M");
	}
}

二.后端代码
这里我分别引入了commons-fileupload-1.4.jar和commons-io-2.7.jar
可以去apache官网下载(http://apache.org/

public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
		request.getRequestDispatcher("WEB-INF/test01.jsp").forward(request, response);
	}
	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		response.setCharacterEncoding("UTF-8");
		// 判断form的enctype是否为multipart请求
		if (!ServletFileUpload.isMultipartContent(request)) {
			throw new RuntimeException("当前请求不支持!");
		}
		try {
			String fileValue = null ;
			// 创建FileItem工产
			DiskFileItemFactory factory = new DiskFileItemFactory();
			//设置使用临时文件的边界值,大于该值(1M)上传文件将保存在临时文件中,反之,写入内存中
			factory.setSizeThreshold(1024*1024*1);//设置边界值为1M
			//设置临时文件
			String tempPath = this.getServletContext().getRealPath("/temp");
			File temp = new File(tempPath);
			factory.setRepository(temp);
			// 创建文件上传核心組件
			ServletFileUpload upload = new ServletFileUpload(factory);
			// 解决上传的文件名乱码
			upload.setHeaderEncoding("UTF-8");
			// 解析请求
			List<FileItem> items = upload.parseRequest(request);
			//遍历items
			for(FileItem item :items){
				if(item.isFormField()){//是普通表单项目
					String fieldName = item.getFieldName();//获得name值
					fileValue = item.getString();//获得value值
					System.out.println(fieldName+":"+fileValue);
				}else{//不是普通表单项目
					//上传文件的原始名称
					String fileName = item.getName();
					//解决上传文件重名
					fileName = System.currentTimeMillis()+ fileName;
					//获取输入流
				    InputStream is = item.getInputStream();
				    //获取文件保存在服务器的imgs文件夹中
				    String path = this.getServletContext().getRealPath("/imgs");
				    response.getWriter().write(path+"\\"+fileValue+"\\"+fileName);
				    path = path+"/"+fileValue;
				    File dirFile = new File(path);
				    if(!dirFile.exists()){
				    	dirFile.mkdir();
				    }
					//创建目标文件,用来存放用户上传的文件
				    File descFile = new File(path ,fileName);
				    //创建文件输出流
				    OutputStream os = new FileOutputStream(descFile);
				    //将输入流的数据写入到输出流中
				    int len = -1;
				    byte[] buffer = new byte[1024];
				    while((len = is.read(buffer)) != -1){
				    	os.write(buffer,0,len);
				    }
				    //关闭流
				    os.close();
				    is.close();
					item.delete();//删除临时文件
				}
			}
		} catch (FileUploadException e) {
			e.printStackTrace();
		}
	}
参考资源链接:[解决multipart/form-data文件上传中的参数传递问题](https://wenku.youkuaiyun.com/doc/1ck705efs6?utm_source=wenku_answer2doc_content) 为了确保你可以顺利使用Ajax提交`multipart/form-data`类型的表单数据,并在后台正确处理这些数据,我推荐你查阅《解决multipart/form-data文件上传中的参数传递问题》这篇文章。在文章中,你将学习到如何在前端使用JavaScript和Ajax技术,以及在服务器端如何解析和处理这种特殊编码的数据。 首先,你需要创建一个包含文件上传和普通参数的表单。然后使用JavaScript监听表单提交事件,通过Ajax调用替代传统表单的提交方法。这里是一个使用jQuery的Ajax方法的示例: ```javascript $('#form2').submit(function(e){ e.preventDefault(); // 阻止表单默认提交行为 var formData = new FormData(this); // 通过表单元素实例化FormData对象 $.ajax({ type: 'POST', // 指定请求类型 url: form2.action, // 使用表单的action属性作为请求的URL data: formData, // 发送的数据 contentType: false, // 不设置内容类型 processData: false, // 不处理发送的数据 headers: {'X-Requested-With': 'XMLHttpRequest'}, // 添加额外的请求头 success: function(response) { // 处理成功的回调函数 console.log('文件上传成功', response); }, error: function(xhr, status, error) { // 处理错误的回调函数 console.error('文件上传失败', status, error); } }); }); ``` 在这个例子中,`FormData`对象自动处理了`multipart/form-data`的编码,使得通过Ajax发送复杂的数据变得简单。在服务器端,你需要使用能够处理`multipart/form-data`的库或代码来解析请求体中的数据。例如,在Node.js中可以使用`multer`中间件来处理文件上传,并通过`req.body`和`req.files`访问其他表单字段。 文章《解决multipart/form-data文件上传中的参数传递问题》将提供更多的细节和解决方案,帮助你在服务器端正确解析和使用文件及普通参数。这对于确保你的应用能够稳定、高效地处理文件上传功能至关重要。 参考资源链接:[解决multipart/form-data文件上传中的参数传递问题](https://wenku.youkuaiyun.com/doc/1ck705efs6?utm_source=wenku_answer2doc_content)
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值