spring html5 拖拽上传多文件

注:这仅仅是一个粗略笔记。有些代码可能没用。兴许会再更新一个能够使用的版本号。不足之处,敬请见谅。

1。spring环境搭建,这里使用的是spring3的jar,须要同一时候引入common-IO 和common-fileupload的jar包。

1.1spring.XXX.xml文件配置bean

<bean id="multipartResolver"
		class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
		<property name="maxUploadSize" value="${web.maxUploadSize}" />
	</bean>

value="xxxx"依据实际情况改动。

2.html表单

<form id="uploadForm" action="data/myData4PipeiUpload" method="post" enctype="multipart/form-data">
                    <div class="upload_box">
                        <div class="upload_main">
                            <div class="upload_choose">
                                <span id="fileDragArea" class="upload_drag_area">请将文件拖拽至此处上传</span>
                                <input id="fileImage" size="30" name="fileselects[]" multiple="multiple"  type="file">
                            </div>
                            <div id="preview" class="upload_preview"></div>
                        </div>

                        <div id="uploadInf" class="upload_inf"></div>
                    </div>
                    <div class="upload_box">
                        文件名2:
				<input  name="fileFieName" id="fileFieName"  />
                    </div>
                    <DIV class="modal-footer">
			        <BUTTON class="btn btn-primary" type="submit" id="submitBut3" data-dismiss="modal">上传数据文件</BUTTON>
			        </DIV>
                </form>

2.1除了普通上传的一些格式要求之外。这里要注意多文件须要name=“XXX[]” multiple=“multiple"

 <input id="fileImage" size="30" name="fileselects[]" multiple="multiple"  type="file">

2.2这里使用了upload.js和zxxFile.js。去配置相关參数

3.后台代码编写两种方式。

3.1

@RequestMapping(value = "/myData4PipeiUpload", method = RequestMethod.POST)
	public void handleRequest(HttpServletRequest request,
            HttpServletResponse response) throws Exception {
        // 转型为MultipartHttpRequest:
       MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
      List<MultipartFile> singleFiles = multipartRequest.getFiles("fileselects[]"); 

        if(singleFiles!=null&&singleFiles.size()>0){
        	for(MultipartFile file: singleFiles){
		        // 获得文件名称:
		        String filename = file.getOriginalFilename();
		        // 获得输入流:
		        InputStream input = file.getInputStream();
		        // 写入文件
		        // 或者:
		        File source = new File("d:/dd/"+filename);
		        file.transferTo(source);
        	}
        }
    }  

注意參数的获取要使用fileselects[]去获取列表

3.2,直接将请求名称写入到@requestParam

@RequestMapping(value = "/myData4PipeiUpload", method = RequestMethod.POST)
	public void handleRequest(@RequestParam("fileselects[]") MultipartFile[] files,HttpServletRequest request,
			HttpServletResponse response) throws Exception {   

		if(files!=null&&files.length>0){
			for(MultipartFile file: files){
				// 获得文件名称:
				String filename = file.getOriginalFilename();
				// 获得输入流:
				InputStream input = file.getInputStream();
				// 写入文件   

				// 或者:
				File source = new File("d:/dd/"+filename);
				file.transferTo(source);
			}
		}
	}  

这样子就能够再进行兴许的操作。

时间: 2024-10-12 07:22:10

spring html5 拖拽上传多文件的相关文章

[开源应用]利用HTML5+resumableJs拖拽上传大文件

前言: 大文件传输一直是技术上的一大难点.文件过大时,一些性提交所有的内容进内存是不现实的.大文件带来问题还有是否支持断点传输和多文件同时传输. 本文以resumableJs为例,介绍了如何在ASP.NET中实现大文件传输.同时本文利用了Html5的新特性:支持拖拽. 本文的主要技术点在于:如何接收resumableJs的传送内容(官网不太清楚)和如何合并文件,难度并不高. 注:原博客中,此文章为原站点个人代码备份所用,注释不多,如有不懂,请在评论中给出. 效果: ASPX File: <htm

基于 jq 实现拖拽上传 APK 文件,js解析 APK 信息

技术栈 jquery 文件上传:jquery.fileupload,github 文档 apk 文件解析:app-info-parser,github 文档 参考:前端解析ipa.apk安装包信息 -- app-info-parser 支持功能 点击或拖拽上传 apk 文件 校验文件类型及文件大小 js 解析 apk 文件信息展示并通过上传接口提交给后端 支持上传过程中取消上传 支持上传成功显示上传信息 支持解析.上传等友好提示 支持从历史记录(所有已上传文件)中选择一个 支持假文件处理,比如

html5拖拽事件 xhr2 实现文件上传 含进度条

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <meta charset="utf-8"> <meta name="viewport&

jQuery插件之路(三)——文件上传(支持拖拽上传)

好了,这次咱一改往日的作风,就不多说废话了,哈哈.先贴上源代码地址,点击获取.然后直接进入主题啦,当然,如果你觉得我有哪里写的不对或者欠妥的地方,欢迎留言指出.在附上一些代码之前,我们还是先来了解下,上传文件的时候需要利用的一些必要的知识. 首先我们要说的就是FileReader对象,这是一个HTML5提出的,专门用来异步的读取用户计算机上文件的对象,这里有详细的介绍.所以如果我们想要使用它,那么首先我们得先创建一个FileReader对象. var fr = new FileReader()

原生API实现拖拽上传文件实践

功能: 拖拽上传文件.图片,上传的进度条,能够同时上传多个文件. 完整的demo地址:https://github.com/qcer/FE-Components/tree/master/QDrag 涉及到的API: 1.HTML5的拖拽事件:dragenter,dragover,drop等 2.XMLHttpRequest  Level2 3.FormData 4.(扩展:HTML5的File API) 概述: 1.利用拖拽实践的API将一个普通的div自定义成一个放置目标,这里有一个技巧是放置

Nodejs express、html5实现拖拽上传

Nodejs express.html5实现拖拽上传 一.前言 文件上传是一个比较常见的功能,传统的选择方式的上传比较麻烦,需要先点击上传按钮,然后再找到文件的路径,然后上传.给用户体验带来很大问题.html5开始支持拖拽上传的需要的api.nodejs也是一个最近越来越流行的技术,这也是自己第一次接触nodejs,在nodejs开发中,最常用的开发框架之一是expess,它是一个类似mvc模式的框架.结合html5.nodejs express实现了拖拽上传的功能. 二.基础知识普及 1.No

Nodejs express、html5实现拖拽上传(转载)

一.前言 文件上传是一 个比较常见的功能,传统的选择方式的上传比较麻烦,需要先点击上传按钮,然后再找到文件的路径,然后上传.给用户体验带来很大问题.html5开始支持拖 拽上传的需要的api.nodejs也是一个最近越来越流行的技术,这也是自己第一次接触nodejs,在nodejs开发中,最常用的开发框架之一是 expess,它是一个类似mvc模式的框架.结合html5.nodejs express实现了拖拽上传的功能. 二.基础知识普及 1.NodeJs基础知识 nodejs简单来说就是一个可

Dropzone.js实现文件拖拽上传

dropzone.js是一个开源的JavaScript库,提供 AJAX 异步文件上传功能,支持拖拽文件.支持最大文件大小.支持设置文件类型.支持预览上传结果,不依赖jQuery库. 查看演示 下载源码 使用Dropzone 我们可以建立一个正式的上传form表单,并且给表单一个.dropzone的class. <form id="mydropzone" action="/upload.php" class="dropzone">&l

使用ivx实现拖拽上传文件功能的经验总结

在实际案例中经常会使用到上传文件的功能,不过普通的上传文件需要用户再去一层一层查找文件的路径并不是十分的方便,今天给大家讲一种使用拖拽放置容器实现上传文件的方法.1.拖拽放置容器拖拽放置容器位于拓展组件中的特殊功能容器类,我们可以给它添加事件拖拽放置,此事件的动作中我们能获取一个返回值--拖拽文件,在调试记录中打印出来可以看到里面包含文件的名称.大小和类型等信息.不过拖拽放置容器只是把文件拖拽进来,上传到服务器还是要使用文件接口组件.文件接口上传文件动作的回调中会收到文件上传到服务器后的一些信息