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);
}
}
}
这样子就能够再进行兴许的操作。
spring html5 拖拽上传多文件的更多相关文章
- [开源应用]利用HTTPHandler+resumableJs+HTML5实现拖拽上传[大]文件
前言: 大文件传输一直是技术上的一大难点.文件过大时,一些性提交所有的内容进内存是不现实的.大文件带来问题还有是否支持断点传输和多文件同时传输. 本文以resumableJs为例,介绍了如何在ASP. ...
- 基于 jq 实现拖拽上传 APK 文件,js解析 APK 信息
技术栈 jquery 文件上传:jquery.fileupload,github 文档 apk 文件解析:app-info-parser,github 文档 参考:前端解析ipa.apk安装包信息 - ...
- html5 拖拽上传文件时,屏蔽浏览器默认打开文件
参考: https://www.cnblogs.com/kingsm/p/9849339.html
- html5实现拖拽上传
<html><head> <meta http-equiv="Content-Type" content="text/html; chars ...
- html5拖拽事件 xhr2 实现文件上传 含进度条
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- HTML5应用之文件拖拽上传
使用HTML5的文件API,可以将操作系统中的文件拖放到浏览器的指定区域,实现文件上传到服务器.本文将结合实例讲解HTML5+jQuery+PHP实现拖拽上传图片的过程,来看下HTML5的魅力吧. H ...
- html5 文件拖拽上传
本文首先发表在 码蜂笔记 : http://coderbee.net/index.php/web/20130703/266 html5 文件拖拽上传是个老话题了,网上有很多例子,我一开始的代码也是网 ...
- [转]人人网首页拖拽上传详解(HTML5 Drag&Drop、FileReader API、formdata)
人人网首页拖拽上传详解(HTML5 Drag&Drop.FileReader API.formdata) 2011年12月11日 | 彬Go 上一篇:给力的 Google HTML5 训练营( ...
- 原生API实现拖拽上传文件实践
功能: 拖拽上传文件.图片,上传的进度条,能够同时上传多个文件. 完整的demo地址:https://github.com/qcer/FE-Components/tree/master/QDrag 涉 ...
随机推荐
- 总结showModalDialog在开发中的一些问题
一.在页面调用window.open()函数后,可以直接在打开的页面中用window.opener来调用父页面的方法,然而如果用showModalDialog打开一个模态窗口,就不能通过window. ...
- [Android学习笔记]LayoutInflater的使用
LayoutInflater用于动态载入布局,然后获取到布局中定义完成的控件引用 常在动态加载布局,和Adapter中用到 使用步骤:1.通过LayoutInflater加载xml布局文件2.从载入的 ...
- LINUX编程学习笔记(十三) 遍历目录的两种方法
1 默认情况下 实际用户和有效用户是一样的 实际用户:执行用户 有效用户:权限用户 getuid() 实际用户 geteuid() 有效用户 chmod u+s 之后 ,其他人执行文件时,实际 ...
- Oracle控制文件操作
控制文件是连接instance和 database的纽带.记录了database的结构信息. 控制文件是1个2进制文件.记录的是当前database的状态. 控制文件可以有多个,在参数文件中通过con ...
- jQuery EasyUI API 中文文档 - 布局(Layout)
<html> <head> <script src="jquery-easyui/jquery.min.js"></script> ...
- 安卓开发28:自定义View类
自定义View类 通过自定义View类,可以自定义复杂的,按照自己需求的控件. 一个简单的例子 mainActivity.java 这个里面就是最普通的代码,但是给自定义的控件加上了一个onclick ...
- oracle 之 内存—鞭辟近里(三)
oracle 之 内存—鞭辟近里(三) 今天是2013-07-08,今天晚上突然接到一个电话,我的外甥问我的qq是多少,我感觉很吃惊,他长大了.在他现在这个年龄就开始接触网络,我难免有少许担心,希望他 ...
- 2014-5-22 java.lang.OutOfMemoryError: Java heap space的一次诊断
收到消息某系统一个节点因为内存溢出而宕机.系统的中间件是weblogic.数据库的oracle. 1. 先用IBM HeapAnalyzer分析内存溢出时的dump文件,找到占用内存最多的请求,然后 ...
- bzoj 3519: [Zjoi2014] 消棋子 题解
[序言]在大家怀疑的眼光下,我做了一个中午和半个下午.调了一个晚上的题目总算A了! [原题] 消棋子是一个有趣的游戏.游戏在一个r * c的棋盘上进行.棋盘的每一个格 子.要么是空,要么是一种颜色的棋 ...
- android File文件的读写操作
本程序实现两个文本框和两个按钮,其中一个文本框和一个按钮用于读取文件内容.另一个文本框和另一个按钮用于写入. java代码: package com.example.activity; import ...