WEB端实现文件夹上传

webkitdirectory属性。这个属性加上之后,就是选择文件夹,然后根据自己业务上传至后台;

前端代码:

<form action="${ctxPath}/invoice/uploadFolder" method="post" enctype="multipart/form-data">
	<input name="chooseFolder" type="file" id="chooseFolder" webkitdirectory/> 
	<input type="submit" id="uploadFolder" style="display : none"/> 
</form>
<iframe name="form" id="form" style="display:none"></iframe>

 监听上传,ajax提交请求:

            /* 监听上传文件夹按钮 */
			$("#chooseFolder").on("change", function() {
			 	var sIndex = layer.msg("识别数据中,请稍候", {icon:16, time:false, shade:0.1});
				dataList = [];
				var fileList = [];
				var files = this.files;
			    console.log(files);
			    for(var i = 0;i<files.length;i++){
			    	fileList.push(files[i])
			    }
		        let formData = new FormData()
		        formData.append("chooseFolder",files);
		        fileList.forEach(function (file) {
		        	formData.append('chooseFolder',file, file.name)
		        })
		        $.ajax({
	                url: "${ctxPath}/invoice/uploadFolder",
	                data:  formData,
	                type: "Post",
	                dataType: "formData",
	                cache: false,//上传文件无需缓存
	                processData: false,//用于对data参数进行序列化处理 这里必须false
	                contentType: false, //必须
	                complete: function(result) {
	                	var responseText = result.responseText
	                	var data = JSON.parse(responseText)
	                	
	                	data.data.forEach(function (d){
	                		dataList.push(d);
	                	})
	                	tableInfo.reload({
							data: dataList,
							limit: dataList.length,
						});
	                	layer.close(sIndex);
	        		}
	            })
			});

 后端Controller:

@RequestMapping("uploadFolder")
public String uploadFolder(@RequestParam("chooseFolder") MultipartFile[] chooseFolder, HttpServletRequest request) throws IOException {

     for(MultipartFile myFile: chooseFolder){
         if(myFile.isEmpty()){
	            System.out.println("空");
	     }else {
	            System.out.println("文件长度" + myFile.getSize());
	            System.out.println("文件类型" + myFile.getContentType());
	            System.out.println("文件名" + myFile.getName());
	            System.out.println("文件原名" + myFile.getOriginalFilename());
	            System.out.println("*********************************");

                // 写处理图片业务
         }
     }
}

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
通过Java Web技术,我们可以实现学生作业的上传功能。首先,需要在前端网页上添加一个表单,让学生填写作业名称和上传文件的路径等信息,这些信息需要通过form表单提交给服务器。 在服务器,我们可以使用Java Servlet技术来处理学生上传的作业文件。Servlet接收到上传的文件后,需要进行文件解析,对文件类型、大小和格式进行检查,并将其存储到指定的文件夹中。同时,我们需要统一规定文件命名方式,以避免文件名的冲突,并记录学生提交作业的时间和其他相关信息。 接着,在数据存储方面,我们可以使用关系型数据库如MySQL来存储学生作业信息。在相应的数据库表中,需要定义作业的一些属性,例如作业名称、上传学生的姓名、学号、作业文件路径、上传时间等信息。这些属性需要与前端网页上的表单属性对应。 最后,我们通过Java Web技术的页面跳转和数据传输,实现学生作业的查看和下载。在前端网页上,我们可以通过Java Bean技术来将后台数据传输到前端,通过JSP技术将数据呈现出来,同时提供下载作业的链接。在链接的响应函数中,我们可以通过文件路径和文件名,将学生的作业文件下载到本地。 综上所述,Java Web 技术无疑是实现学生作业上传的一种可行且成熟的方法,同时,它还具有其他许多优点,例如安全性高、支持并发处理、易于扩展等等。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

向往有妳

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值