多文件文件上传组件
‘壹’ 文件上传工具有哪些
有
HandyFTP
CuteFTP Pro文件上传工具
纵横HTTP文件上传组件
批量文件上传工具
BrsBox上传工具
Google Docs文件上传工具
等等，网络网页搜有很多，根据需要选择
‘贰’ [FE] 用 FormData 上传多个文件到 MultipartFile[] 接口
最近有一个场景，在提交表单的时候，需要实现添加附件的功能，
表单内容要先提交到服务端，创建一个 issue，然后再将附件添加到这个 issue 中。
所以，附件在用户添加的时候，是 没有立即上传 的，
用户可以随意在浏览器端添加和删除，issue 创建后再一起上传。
前端采用的组件库是 antd ，用到了 upload 组件。
服务端接口是自定义实现的，也许并不支持 antd upload 上传组件的规范。
服务端接受数据时，使用了 MultipartFile ，这是 Spring 框架中常用的 写法 。
我们先看看 html input[type=file] 组件默认行为，
点击 “选择文件”，浏览器会弹出一个窗口，
选中一个文件，点 “打开”，就会触发 onchange 事件，
在 onchange 事件中，可以通过 e.target.files[0] 拿到刚才上传的那个 File 对象 。
再来看一下 upload 组件的默认行为，
点击 “添加”，浏览器也会弹出那个选择文件的窗口，
选中一个文件，点 “打开”，发现上传失败了。
打开控制台，看到 upload 组件向 / 这个地址发送了一个 POST 请求，
数据格式如下，
我们可以向 upload 组件传入 action 参数，修改 POST 请求地址，
但是，选中文件后立即上传 不符合 我们的场景，我们需要提交表单之后，将多个文件统一上传。
所以我们得自定义 upload 组件的行为。
upload 组件的有一个 customRequest 属性（ #api ），
它可以配置自定义的上传行为。
我们的思路是，先将选中后自动上传的行为取消掉，然后再在提交表单后统一上传。
取消自动上传 的实现片段如下，
我们只需要在 customRequest 回调中，调用它的 onSuccess 参数即可。
删除也是可以用的，
现在我们添加两个附件，
接着来看前端怎样将这些附件，统一上传给服务端，具体实现如下，
可以看到请求成功了（项目中的 url 跟本例稍有不同，下图只为了示意），
还有几个需要注意的点：
上文 httpClient.post 实际调用了 XMLHttpRequest 发送请求，可能会遇到 跨域 的问题。
所以在调试上传接口的时候，需要检查一下服务端的配置，是否支持跨域请求。
CORS 相关的内容大致如下：
在预检请求阶段，服务端对 OPTIONS 请求的响应头中会包含 Access-Control-Allow-Origin ，
表明服务端接受该域 http://foo.example 的跨域请求。
注：
这里需要后端实现 OPTIONS 方法，后端框架一般会通过配置方式统一处理（返回 200 或 204，不能是 4xx）。
如果未配置统一处理方式，框架可能会直接返回 404 导致预检请求失败，CORS 请求也会失败。
使用 XMLHttpRequest 发送请求时，也可以携带 cookie 信息，
同时 预检请求中服务端响应头，也要包含 Access-Control-Allow-Credentials ，否则就不会发送 cookie
对于附带 cookie 的请求，服务器不能设置 Access-Control-Allow-Origin 的值为 “ * ”，否则请求将会失败。
而将 Access-Control-Allow-Origin 的值设置为具体的地址 http://foo.example ，请求才能成功。
我们上传功能用到了携带 cookie 的跨域请求，
可以看到服务端响应头中确实包含了， Access-Control-Allow-Credentials 和 Access-Control-Allow-Origin 两个字段。
Spring: Uploading Files
Spring: org.springframework.web.multipart #MultipartFile
ant-design v4.11.1
Ant Design - Upload #API
MDN: CORS
‘叁’ Easyui的easyui-filebox有人知道是否支持 多文件上传吗
easyui-filebox 只是一个UI的插件（其实还是INPUT标签），它不是上传组件，所有就不存在是否支持多文件上大旅传，你要想一次上传多个文件，可以设置多个easyui-filebox。
拓展
EasyUI+SpringMVC 单个/多个文件上传
基本步骤：
按或喊照数据流向来阐述
>>> 页面提供文件上传控件.
>>> contorller端接收页面传入的文件流，在这个步骤可以写入数据库或者滚团凳放到指定目录.
>>> 将上传的返回结果写回页面.
‘肆’ 如何使用AspUpload组件上传文件
你好，试试以下的方法：一、摘要Asp组件有内置的、服务器安装时附带的，更多的是第三方提供的，今天来学习文件上传的其中一个组件aspupload组件使用方法。
二、aspupload组件的下载、安装或注册 1、asp组件的下载、安装
（1）可以从网上下载。
（2）直接双击后进行安装。
AspUpload组件下载2、asp上传组件的功能
a.限制上载文件的大小
b.设置用户的权限
c.修改文件属性
d.同时上载多个文件
e.能够将文件保存到数据库中
f.支持文件删除，自动生成与服务器上文件不同名的文件
g.拥有管理权限的用户甚至可以使用该控件进行远程注册
三、aspupload组件的简单应用
1、实例一（1.asp）：通过代码实现三个文件的上传功能。
如下图所示：
（1）静态页面：1个表单，三个文件域，一个按钮，其中表单form的动作如下。 （2）其中客户端文件要注意几点：
* 文件上载提交表单(Form)的enctype必须指定为“multipart/form-data”
* 语句表示上载文件域，用户可以在该域中输入或选定文件。
* 传递一个参数act（名称可自己取），其值可以自己随便定，目的是触发上传事件。
（3）动态代码如下：
2、实例二（2.asp）：修改程序1.asp，要求在上传文件后显示上传文件的文件名及大小。
增加如下代码： response.write("文件1是：
")response.write(upload.files(1).path)
response.write("文件2是：
")response.write(upload.files(2).path)
response.write("文件3是：
")
response.write(upload.files(3).path)
说明：
upload.files方法用来获取文件的相关属性，path是文件的路径，size是文件的大小。
3、实例三（3.asp）：修改程序2.asp，要求上传的三个文件大小不能超过5K，如果上传的文件已经存在则要求不覆盖文件。
在上传之前增加如下代码：
upload.setmaxsize 5120,false
upload.overwritefiles=fals说明：
（1）upload.setmaxsize 5120,false其功能为设置文件最大为5120字节，false参数说明当文件超过5120字节时则删除超过部分，true参数说明当文件超过5120字节时则出错。
（2）upload.overwritefiles=false，其功能表示文件不进行覆盖，如果上传同样文件名的文件，上传后文件名自动会在后面添加一个数字。
四、自学第二个上传文件的组件
1、Lyfupload组件的下载
2、学习此组件的安装或注册
3、通过课本例子进行文件的上传
五、问题
1、传到学校里服务器172.18.0.7运行时出现以下错误，Server.CreateObject 失败
分析原因：学校服务器不支持aspupload上传组件
2、如果服务器不支持aspupload等上传组件，请大家使用无组件上传功能（编写代码），见书本上P322，此类代码比较复杂，同学们能够拿来使用，无须自己编写。
3、大家在网上申请个人空间时要看清服务器支持哪些组件，这样有利于编写代码。
‘伍’ 如何通过js完成多个文件的上传
HTML5 file组件的新属性
accept : 如果在file组件中增加这个属性就可以直接控制上传的文件类型了，实在是很方便。
multiple：是否允许选择多个文件
HTML5 页面代码修改后
<img width="400" height="250"/><br />
<input type="file" id="pic" name="pic" onchange="printFileInfo()" accept="image/*" multiple="multiple"/>
<input type="button" value="上传图片" onclick="uploadFile()" /><br />
<div id="parent">
<div id="son"></div>
</div>
accept 的值可以参阅：IANA MIME 类型（标准 MIME 类型的完整列表），如果使用的是DW开发的话，软件本身就有提示。
如果选择了多个文件，可以用JS做循环打印，看看文件的名称，类型和大小,看演示代码
function printFileInfo(){
var picFile = document.getElementById("pic");
var files = picFile.files;
for(var i=0; i<files.length; i++){
var file = files[i];
var div = document.createElement("div")
div.innerHTML = "第("+ (i+1) +") 个文件的名字："+ file.name +
" , 文件类型："+ file.type +" , 文件大小:"+ file.size
document.body.appendChild( div)
}
}
既然可以循环多文件的话，就可以尝试多文件上传了。
1、首先创建 XMLHttpRequest 对象
//这是全局变量。因为是示例，所以就没有判断浏览器类型，低版本IE这么写的话会出问题的
var xhr = new XMLHttpRequest()
2、上篇介绍了进度事件(Progress) ， 这次实现 progress 和 error 2个事件
error：在请求发生错误时触发。
对应上传时发生错误导致的上传失败：uploadFailed()
//上传失败
function uploadFailed(evt) {
alert("上传失败");
}
progress：在接收相应期间持续不断触发。
对应上传进度方法：onprogress()
/**
* 侦查附件上传情况 ,这个方法大概0.05-0.1秒执行一次
*/
function onprogress(evt){
var loaded = evt.loaded; //已经上传大小情况
var tot = evt.total; //附件总大小
var per = Math.floor(100*loaded/tot); //已经上传的百分比
$("#son").html( per +"%" );
$("#son").css("width" , per +"%");
}
最后就是上传方法了，注意上面的html代码中上传用的方法也需要改成这个uploadFile()方法才能正常使用。
//上传文件
function uploadFile() {
//将上传的多个文件放入formData中
var picFileList = $("#pic").get(0).files;
var formData = new FormData();
for(var i=0; i< picFileList.length; i++){
formData.append("file" , picFileList[i] );
}
//监听事件
xhr.upload.addEventListener("progress", onprogress, false);
xhr.addEventListener("error", uploadFailed, false);//发送文件和表单自定义参数
xhr.open("POST", "upload");
//记得加入上传数据formData
xhr.send(formData);
}
‘陆’ webuploader分片上传的实现代码（前后端分离）
本文介绍了webuploader分片上传的实现代码（前后端分离），分享给大家，具体如下：
WebUploader是由Bai
WebFE(FEX)团队开发的一个简单的以HTML5为主，FLASH为辅的现代文件上传组件。在现代的浏览器里面能充分发挥HTML5的优势，同时又不摒弃主流IE浏览器，沿用原来的FLASH运行时，兼容IE6+，iOS
6+,
android
4+。两套运行时，同样的调用方式，可供用户任意选用。采用大文件分片并发上传，极大的提高了文件上传效率。(这个是从官网上直接的解释)
功能描述
1、webuploader是网络研发的上传组件，文档不是特别规整，但是也够用了。
2、前端使用官网的上传图片demo，在此基础上代码略微调整做分片。既可以上传图片也可以上传文件。文件超过分片大小才启用分片。
3、分片上传已做md5校验，达到秒传的效果。分片以后需要合并，可以先分片后合并，也可以边分片边合并，本示例采用的是边分片边合并的方案。
4、后端用springboot做框架搭建。springMVC做rest服务，开启跨域访问。
5、容器用springboot内置的tomcat插件，运行Application的main方法即可启动服务；
显示效果
关键代码前端
WebUploader.Uploader.register({
'name':
'webUploaderHookCommand',
'before-send-file':
'beforeSendFile',
"before-send":
"beforeSend"
},
{
beforeSendFile:
function(file)
{
var
task
=
new
WebUploader.Deferred();
fileName
=
file.name;
fileSize
=
file.size;
(new
WebUploader.Uploader()).md5File(file,
0,
10
*
1024
*
1024).progress(function(percentage)
{}).then(function(val)
{
fileMd5
=
val;
var
url
=
checkUrl;
var
data
=
{
type:
0,
fileName:
fileName,
fileMd5:
fileMd5,
fileSize:
fileSize
};
$.ajax({
type:
"POST",
url:
url,
data:
data,
cache:
false,
async:
false,
//
同步
timeout:
1000,
//
todo
超时的话，只能认为该分片未上传过
dataType:
"json",
error:
function(XMLHttpRequest,
textStatus,
errorThrown)
{
file.statusText
=
'server_error';
task.reject();
}
}).then(function(data,
textStatus,
jqXHR)
{
if(data.rtn
==
0)
{
if(data.obj
==
1)
{
file.statusText
=
'file_existed';
task.reject();
}
else
{
task.resolve();
}
}
else
{
task.reject();
}
});
});
return
task.promise();
},
beforeSend:
function(block)
{
var
task
=
new
WebUploader.Deferred();
var
url
=
checkUrl;
var
data
=
{
type:
1,
fileName:
fileName,
fileMd5:
fileMd5,
chunk:
block.chunk,
fileSize:
block.end
-
block.start
};
$.ajax({
type:
"POST",
url:
url,
data:
data,
cache:
false,
async:
false,
//
同步
timeout:
1000,
//
todo
超时的话，只能认为该分片未上传过
dataType:
"json"
}).then(function(data,
textStatus,
jqXHR)
{
if(data.rtn
==
0
&&
data.obj
==
1)
{
task.reject();
//
分片存在，则跳过上传
}
else
{
task.resolve();
}
});
this.owner.options.formData.fileMd5
=
fileMd5;
this.owner.options.formData.chunkSize
=
chunkSize;
return
task.promise();
}
});
//
实例化
uploader
=
WebUploader.create({
pick:
{
id:
'#filePicker',
label:
'点击选择文件'
},
formData:
{
uid:
123
},
dnd:
'#dndArea',
//指定文件拖拽的区域
paste:
'#uploader',
//指定监听paste事件的容器，如果不指定，不启用此功能。此功能为通过粘贴来添加截屏的图片。建议设置为document.body.
swf:
'../plugins/webuploader/Uploader.swf',
chunked:
true,
chunkSize:
chunkSize,
chunkRetry:
false,
threads:
1,
server:
uploadUrl,
//
runtimeOrder:
'flash',
//
accept:
{
//
title:
'Images',
//
extensions:
'gif,jpg,jpeg,bmp,png',
//
mimeTypes:
'image/*'
//
},
//
禁掉全局的拖拽功能。这样不会出现图片拖进页面的时候，把图片打开。
disableGlobalDnd:
true,
fileNumLimit:
300
//限制多文件上传的个数
//fileSizeLimit:
200
*
1024
*
1024,
//
限制所有文件的大小
200
M
//fileSingleSizeLimit:
50
*
1024
*
1024
//
限制单个文件的大小
50
M
});
后端
import
java.io.File;
import
java.io.IOException;
import
org.slf4j.Logger;
import
org.slf4j.LoggerFactory;
import
org.springframework.beans.factory.annotation.Value;
import
org.springframework.stereotype.Service;
import
org.springframework.web.multipart.MultipartFile;
import
com.bear.upload.util.FileUtil;
import
com.bear.upload.util.RETURN;
import
com.bear.upload.vo.CheckMd5FileVO;
import
com.bear.upload.vo.UploadVO;
@Service
public
class
ChunkUploadService
{
private
static
Logger
LOG
=
LoggerFactory.getLogger(ChunkUploadService.class);
@Value("${file.upload.path}")
private
String
UPLOAD_PATH;
private
static
final
String
Delimiter
=
"-";
/**
*
上传之前校验(整个文件、分片)
*
*
@param
md5FileVO
*
@return
*/
public
Object
check(CheckMd5FileVO
md5FileVO)
{
Integer
type
=
md5FileVO.getType();
Long
chunk
=
md5FileVO.getChunk();
String
fileName
=
md5FileVO.getFileName();
Long
fileSize
=
md5FileVO.getFileSize();
if
(type
==
0)
{//
未分片校验
String
destfilePath
=
UPLOAD_PATH
+
File.separator
+
fileName;
File
destFile
=
new
File(destfilePath);
if
(destFile.exists()
&&
destFile.length()
==
fileSize)
{
return
RETURN.success("文件已存在，跳过",
1);
}
else
{
return
RETURN.success("文件不存在",
0);
}
}
else
{//
分片校验
String
fileMd5
=
md5FileVO.getFileMd5();
String
destFileDir
=
UPLOAD_PATH
+
File.separator
+
fileMd5;
String
destFileName
=
chunk
+
Delimiter
+
fileName;
String
destFilePath
=
destFileDir
+
File.separator
+
destFileName;
File
destFile
=
new
File(destFilePath);
if
(destFile.exists()
&&
destFile.length()
==
fileSize)
{
return
RETURN.success("分片已存在，跳过",
1);
}
else
{
return
RETURN.success("分片不存在",
0);
}
}
}
/**
*
文件上传
*
*
@param
file
*
@param
uploadVO
*
@param
appVersion
*
@return
*/
public
Object
upload(MultipartFile
file,
UploadVO
uploadVO)
{
Long
chunk
=
uploadVO.getChunk();
if
(chunk
==
null)
{//
没有分片
return
UnChunkUpload(file,
uploadVO);
}
else
{//
分片
return
ChunkUpload(file,
uploadVO);
}
}
/**
*
分片上传
*
*
@param
file
*
@param
uploadVO
*
@param
appVersion
*
@return
*/
public
Object
ChunkUpload(MultipartFile
file,
UploadVO
uploadVO)
{
String
fileName
=
uploadVO.getName();
String
fileMd5
=
uploadVO.getFileMd5();
Long
chunk
=
uploadVO.getChunk();//
当前片
Long
chunks
=
uploadVO.getChunks();//
总共多少片
//
分片目录创建
String
chunkDirPath
=
UPLOAD_PATH
+
File.separator
+
fileMd5;
File
chunkDir
=
new
File(chunkDirPath);
if
(!chunkDir.exists())
{
chunkDir.mkdirs();
}
//
分片文件上传
String
chunkFileName
=
chunk
+
Delimiter
+
fileName;
String
chunkFilePath
=
chunkDir
+
File.separator
+
chunkFileName;
File
chunkFile
=
new
File(chunkFilePath);
try
{
file.transferTo(chunkFile);
}
catch
(Exception
e)
{
LOG.error("分片上传出错",
e);
return
RETURN.fail("分片上传出错",
1);
}
//
合并分片
Long
chunkSize
=
uploadVO.getChunkSize();
long
seek
=
chunkSize
*
chunk;
String
destFilePath
=
UPLOAD_PATH
+
File.separator
+
fileName;
File
destFile
=
new
File(destFilePath);
if
(chunkFile.length()
>
0)
{
try
{
FileUtil.randomAccessFile(chunkFile,
destFile,
seek);
}
catch
(IOException
e)
{
LOG.error("分片{}合并失败：{}",
chunkFile.getName(),
e.getMessage());
return
RETURN.fail("分片合并失败",
1);
}
}
if
(chunk
==
chunks
-
1)
{
//
删除分片文件夹
FileUtil.deleteDirectory(chunkDirPath);
return
RETURN.success("上传成功",
1);
}
else
{
return
RETURN.fail("上传中...",
1);
}
}
/**
*
未分片上传
*
*
@param
file
*
@param
uploadVO
*
@param
appVersion
*
@return
*/
public
Object
UnChunkUpload(MultipartFile
file,
UploadVO
uploadVO)
{
String
fileName
=
uploadVO.getName();
//
String
fileMd5
=
uploadVO.getFileMd5();
//
文件上传
File
destFile
=
new
File(UPLOAD_PATH
+
File.separator
+
fileName);
if
(file
!=
null
&&
!file.isEmpty())
{
//
上传目录
File
fileDir
=
new
File(UPLOAD_PATH);
if
(!fileDir.exists())
{
fileDir.mkdirs();
}
if
(destFile.exists())
{
destFile.delete();
}
try
{
file.transferTo(destFile);
return
RETURN.success("上传成功",
0);
}
catch
(Exception
e)
{
LOG.error("文件上传出错",
e);
return
RETURN.fail("文件上传出错",
0);
}
}
return
RETURN.fail("上传失败",
0);
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:Vue2.0结合webuploader实现文件分片上传功能使用WebUploader实现分片断点上传文件功能（二）webuploader在springMVC+jquery+Java开发环境下的大文件分片上传的实例代码jQuery
webuploader分片上传大文件