在html页面使用JavaScript实现文件上传到本地服务器并放回文件所在路径

时间:2024-03-18 09:57:14

以前学的是jsp页面,可是毕设项目是html页面,后台响应数据,html不可以直接获取响应数据。我使用jsp很容易后去,但是变成html页面之后,有点难了,应为不可以直接使用EL表达式,所以我就使用JavaScript用于接收后台传来的数据。

开讲:

首先创建一个项目:

导入所需的jar包:

写html页面:

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<title>Document</title>
<style>
body{
	transition:1s;
}
#div1{
	width:100%;
	height:3px;
	position: relative;
	top:50px;
}
#num{
	position: absolute;
	width:100%;
	height: 3px;
	line-height: 3px;
	text-align: center;
	top:-1px;
	font-size: 30px;
}
#div2{
	width:0;
	height: 3px;
	background: #317EF3;
	transition: .2s;
	opacity:1;
}
</style>
</head>
<body>

	<input type="file" name="file" id="f" value="" />
	<input type="button" value="按钮" id="btn"/><br>
	<input type="text" id="span"></span>
<script type="text/javascript">
	/*
		当使用表单上传控件的时候,可以通过表单控件下的
		files[0],找到上传的文件资源。
		new FormData:
			FormData对象可以组装一组用 XMLHttpRequest发送请求的键/值对
			通过append方法把键值对放到FormData对象中,当send的时候直接传
			FormData对象即可。
			FormData.append(\'user\',\'momo\');
			FormData.append(\'pass\',\'12345\');
			ajax.send(FormData);		
	*/
	
	
	const f = document.getElementById(\'f\');
	const btn = document.getElementById(\'btn\');
	const span = document.getElementById(\'span\');
	console.dir(f)
	
	btn.onclick = function(){
		const ajax = new XMLHttpRequest;
		ajax.open(\'post\',\'Upload2Servlet\');
		//ajax.setRequestHeader(\'Content-Type\',\'multipart/form-data\');
		const ff = f.files[0];
		const formData = new FormData;
		formData.append(\'file\',ff);
		ajax.send(formData);
		ajax.onload = function(){
			console.log(ajax.responseText)
			span.value = JSON.parse(ajax.responseText).msg;
			//result.innerHTML=document.getElementById("text1").value;
		}
		
	}

</script>
	
</body>
</html>

后台代码:


import java.io.File;
import java.io.IOException;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

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.FileUploadException;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;

import com.fasterxml.jackson.databind.ObjectMapper;
@WebServlet("/Upload2Servlet")
public class Upload2Servlet extends HttpServlet {
	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		request.setCharacterEncoding("utf-8");
		response.setContentType("text/html;charset=utf-8");

		Map<String,Object> map=new HashMap<String,Object>();
		DiskFileItemFactory factory = new DiskFileItemFactory();
		ServletFileUpload sfu = new ServletFileUpload(factory);
		try {
			List<FileItem> fileItemList = sfu.parseRequest(request);
			FileItem fi1 = fileItemList.get(0);
			
			String url=fi1.getName();
			String path="D:/video/"+url+"";
			File destFile = new File(path);
			fi1.write(destFile);
			map.put("msg",path);
			System.out.println(map.get("msg"));
			ObjectMapper mapper=new ObjectMapper();
			mapper.writeValue(response.getWriter(),map);
		} catch (FileUploadException e) {
			throw new RuntimeException(e);
		} catch (Exception e) {
			throw new RuntimeException(e);
		}
	}
}

运行项目结果: