文件上传及多文件上传

一、单文件上传

注:

1.我这里使用的是springmvc,所以在配置文件中,要添加如下配置(并添加commons-fileupload-1.2.1.jar和commons-io-1.3.2.jar)

2.springmvc其余配置参照之前文章

<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
	<property name="defaultEncoding" value="UTF-8"></property>
	<property name="maxInMemorySize" value="100"></property>
	<property name="uploadTempDir" value="fileresouce/temp"></property><!-- 默认文件夹 -->
</bean>

表单:

<form action="###" id="sform" method="post" enctype="multipart/form-data">
	<input type="file" name="myfile" id="myfile"/> 
	<input type="submit" value="上传" >
</form>

处理:

public Boolean upload(@RequestParam("myfile") MultipartFile file, HttpServletRequest request, HttpServletResponse response) {
	String filePath = "";
	if (!file.isEmpty()) {
		try {
			filePath = request.getSession().getServletContext().getRealPath("/") + "/file/" + file.getOriginalFilename();// 文件绝对路径(包括文件名)
			String filerootpath = request.getSession().getServletContext().getRealPath("/") + "/file/";// 文件夹路径
			// 如果该文件夹不存在,则手动创建
			File filerootpathdic = new File(filerootpath);
			if (!filerootpathdic.exists()) {
				filerootpathdic.mkdirs();
			}
			file.transferTo(new File(filePath));// 上传文件
		} catch (Exception e) {
			e.printStackTrace();
		}
	}
	return true;
}

#


二、多文件上传

表单:

<form action="${basepath}/fileupload/upload.do" id="sform" method="post" enctype="multipart/form-data">
	<input type="file" name="myfile" id="myfile" <span style="color:#ff0000;"><strong>multiple="multiple"</strong></span> /> 
	<input type="submit" id="btn" value="上传" >
</form>
处理:

public Boolean upload(@RequestParam("myfile") <strong><span style="color:#ff0000;">MultipartFile[] file</span></strong>,HttpServletRequest request,HttpServletResponse response){
	<span style="color:#ff0000;"><strong>for(MultipartFile f:file){</strong></span>
		String filePath="";
		if (!f.isEmpty()) {
			try {
				filePath= request.getSession().getServletContext().getRealPath("/")+ "/file/"+ f.getOriginalFilename();
				String filerootpath = request.getSession().getServletContext().getRealPath("/")+ "/file/";
				File filerootpathdic = new File(filerootpath);
				if(!filerootpathdic.exists()){
					filerootpathdic.mkdirs();
				}
				f.transferTo(new File(filePath));
			} catch (Exception e) {
				e.printStackTrace();
			}
		}
	}
	return true;
 }


注:

1.多文件上传与单文件上传实质是一样的,

区别:1)标签中添加multiple属性;2)后台用数组接收

2.前台表单中name="myfile"的值要与后台@RequestParam("myfile")的参数名称要一致,否则会报400错误

3.我这儿上传文件,不限类型,如有限制,在配置文件中添加相应条件即可



`el-upload` 是 Element UI 提供的一个用于文件上传的功能组件,它支持单个文件上传、批量上传以及上传前的限制条件设置。如果需要实现递归上传文件,通常是指在遇到文件夹时,能够自动遍历文件夹内部的所有文件并一起上传。这通常涉及到文件系统的操作,比如读取目录内容。 在 Vue.js 中使用 `el-upload` 实现文件夹递归上传,可以采用以下步骤: 1. **检查是否是文件夹**:在用户选择文件后,通过 JavaScript 的 `File` 对象的 `isDirectory` 属性判断当前选中的是否是文件夹。 2. **获取文件夹内容**:如果确实是文件夹,可以通过 `FileReader` API 或者 Node.js 模块 (如 fs) 遍历文件夹内的文件。 3. **将文件列表添加到上传队列**:对每个文件调用 `addFiles` 方法,将其添加到 `el-upload` 组件的待上传文件列表中。 4. **处理上传**:当所有文件都添加到队列后,可以选择一次性上传整个队列,或者分批上传。 5. **回调处理**:在上传完成后,可以监听 `on-success` 或其他适当的钩子函数来处理上传结果。 下面是一个简单的伪代码示例: ```javascript methods: { handleDrop(file) { if (file.isDirectory) { this.getFilesFromFolder(file).then(files => { this.$refs.upload.addFiles(files); }); } else { // 单个文件直接上传 this.$refs.upload.addFiles(file); } }, getFilesFromFolder(dir) { return new Promise((resolve, reject) => { const reader = new FileReader(); reader.onload = () => { // 读取目录内容,解析成文件数组 // ...这里处理实际的文件遍历逻辑... resolve(resultArray); }; reader.readAsText(dir); }); } } ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值