如何利用html中的input=file上传文件

2018-04-28 09:07:21 1.2k 阅读 AI 写同款 · GEO 优化AI 选题数据监测一键分发 ›

告别‘线束丛林’：手把手拆解车身域控制器（BCM/PEPS/网关）的硬件选型与PCB布局要点本文深入解析车身域控制器的硬件选型与PCB布局要点，涵盖主控MCU选择、通信接口设计、电源架构优化及EMC设计等关键环节。通过实战案例分享，帮助工程师解决高密度集成带来的电源完整性、热管理和信号隔离挑战，实现更稳定高效的汽车电子系统设计。阅读详情

最近在写毕业设计，要求一次性上传多个类型不一样的文件，求大神指教。
具体要求是：在一个form表单中共有1个select和6个input（其中前2个为普通文本输入，后4个位文件类型），然后需要将form表单中的7个内容都上传，其中后4个文件类型的input中每一个input要上传多个同一类型的文件，但每一个input要上传的文件类型是不同的（第1个input要上传的文件类型为视频，后3个为word文档或ppt等）。
其中前台jsp代码为：



<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<script src="js/jquery-2.2.4.min.js"></script>

<title>添加课程</title>

</head>

<body>

	<form action="courseController/uploadCourse" method="post" enctype="multipart/form-data">

		<br/>

		<select name="subject" id="subject">

			<option>请选择所属学科</option>

		</select>

		<br/>

		<input name="type" type="text" placeholder="请填写具体课程方向" maxlength="15">

		<br/>

		请输入课程名：<input name="name" type="text" placeholder="请输入课程名"/>

		<br />

		请选择要上传的课程视频：<input type="file" accept="video/*" multiple/>

		<br/>

		请选择上传课件资源：<input type="file" accept=".pptx,.ppt,.doc,.docx,,.pdf" multiple/>

		<br/>

		请选择要上传的课后习题：<input type="file" accept=".pptx,.ppt,.doc,.docx,,.pdf" multiple/>

		<br/>

		请选择要上传的课后习题答案：<input type="file" accept=".pptx,.ppt,.doc,.docx,,.pdf" multiple/>

		<br/>

		<input type="submit" value="提交"/>

	</form>

</body>



<script type="text/javascript">

	window.load = loadSubject();

	

	//加载数据库中的subject表中的所有课程

	function loadSubject(){

		$.ajax({

			url : "courseController/listCourse",

			datatype : "json",

			type : "post",

			success:function(result){

				if(result.status == 0){

					var selDom = $("#subject");

					for(var i = 0;i < result.data.length;i++){

						selDom.append("<option value=" + result.data[i] + ">" + result.data[i] + "</option>");

					}

				}else{

					alert("啊哦，服务器开小差了！");

				}

			}

		});

	}

	

</script>

</html>

请求的后台Controller代码为：



@RequestMapping("/courseController/uploadCourse")

	public String uploadCourse2(HttpServletRequest request,HttpServletResponse response){

		FileItemFactory factory = new DiskFileItemFactory();

		ServletFileUpload fileUpload = new ServletFileUpload(factory);

		try {

			List<FileItem> list = fileUpload.parseRequest(request);

			for (FileItem fileItem : list) {

				// input的name属性

				String subject = null,type = null,name = null;

				if (fileItem.isFormField()) {

					String value = fileItem.getString("UTF-8");

					if(fileItem.getFieldName().equals("subject")){

						subject = value;

					}else if(fileItem.getFieldName().equals("type")){

						type = value;

					}else if(fileItem.getFieldName().equals("type")){

						name = value;

					}

				} else {

					String fileName = fileItem.getName();

					// 处理文件名绝对路径问题

					int index = fileName.lastIndexOf("\\");

					if (index != -1) {

						fileName = fileName.substring(index + 1);

					}

					String saveName = CommonsUtils.uuid() + "_" + fileName;

					File root = new File("D:/resources");

					String mimeType = fileItem.getContentType();

					String fileType = mimeType.substring(0, mimeType.indexOf("/"));

					File dirFile = new File(root, fileType);

					// 创建目录链

					dirFile.mkdir();

					File child = new File(dirFile, saveName);

					fileItem.write(child);

					//address.add(type + "/" + saveName);

					String saveAddresss = fileType + "/" + saveName;

				}

			}

		} catch (Exception e) {

			e.printStackTrace();

		}

		return "aaa";

	}