plupload +springMVC实例应用(IE9下，文件多选，上传，终止，带有进度条)

最新推荐文章于 2021-10-06 21:19:35 发布

茶小新

最新推荐文章于 2021-10-06 21:19:35 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

文章标签： ie 9 spring mvc plupload 进度条

本文链接：https://blog.youkuaiyun.com/wangchunmeix/article/details/50424013

本文介绍了如何使用plupload插件在IE9环境下实现文件多选、上传、终止功能，并展示进度条效果。通过与SpringMVC后端交互，完成文件上传的完整流程。同时提供了相关前端和后端的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

当然首先你要将相关资源导到项目中

<style>

body{ font-size: 12px;}
body,p,div{ padding: 0; margin: 0;}
#file-list{ margin-left:10px;}
#file-list li{ margin-bottom: 10px;}
.file-name{ line-height: 15px;}
.progress{ height: 15px; font-size: 0; line-height: 4px; background: #38b1eb; width: 0;}
.catalogue{ position: fixed; _position:absolute; _width:200px; left: 0; top: 0; border: 1px solid #ccc;padding: 10px; background: #eee}
.catalogue a{ line-height: 30px; color: #0c0}
.catalogue li{ padding: 0; margin: 0; list-style: none;}
.container{width:600px; border:1px solid #6C9C2C;height:15px;}
.removeFile:hover{text-decoration:underline;color:#33ccff;}
</style>

</div>

<form>

var uploader = new plupload.Uploader({
//实例化一个plupload上传对象
browse_button : 'browse',

//后台方法路径
url : '<%=basePath%>data/batchImport',
//设置自定义参数/自定义变量
multipart_params: { 'dir': '','directoryId':'','description':'','dirDesc':''},
//这两个路径下的东西一定要有，不然弹出的对话框不对
flash_swf_url : '<%=basePath%>js/Moxie.swf',
silverlight_xap_url : '<%=basePath%>js/Moxie.xap',
unique_names : true, // 上传的文件名是否唯一
multipart:true

});
uploader.init(); //初始化

//绑定文件添加进队列事件
uploader.bind('FilesAdded',function(uploader,files){
for(var i = 0, len = files.length; i<len; i++){
var file_name = files[i].name; //文件名
var file_size= files[i].size;

//构造html来更新UI，按照自己的需求
var html = '<li id="file-' + files[i].id +'"><div style="width:600px;"><h2 name="fileup" class="file-name" style="width:210px;float:left;">' + file_name+'</h2><h2 style="width:40px;float:left;">描述:</h2><input id="desc-' + files[i].id +'" type="text" placeholder="描述" style="width:200px;float:left;"><div class="removeFile" style="width:60px;float:left;margin-left:85px;">删除文件</div></div><br><div class="container" style="margin-top:5px;"><p id="progress-' + files[i].id +'" class="progress" style="width:0%;"></p></div><p id="percent-' + files[i].id +'" class="percent"></p></li>';
$(html).appendTo('#file-list');
}
});
//上传前进行操作
uploader.bind('BeforeUpload',function(uploader,file){

//一些简单的，适合我项目的赋值和判断
if(document.dataForm.aa[1].checked){
var directory=document.getElementById("directory").value;
if(nextStatus==""){
uploader.settings.multipart_params.dir=directory;
var description=document.getElementById("description").value;
if(description!="" && description!=null){
uploader.settings.multipart_params.dirDesc=description;
}
}

}
uploader.settings.multipart_params.description=document.getElementById("desc-" + file.id).value;
});

//接收后台返回的数据，后台需要用ajax返回方式
uploader.bind('FileUploaded',function(uploader,file,responseObject){

//在response中可以获得后台传过来的数据
var resultData = JSON.parse(responseObject.response);
var result=JSON.parse(resultData);
if(result.errorMessage=="409"){
type=409;
bar.style.background="#cc0000";
total.innerHTML = "上传失败";
alertBox({content: '目录名称已存在，请更改！', lock: true, drag: false,ok: function(){
},cancel: false});

//停止当前次的上传
uploader.stop();
return false;
}else {

//插件自带的状态
if(responseObject.status=="200"){
bar.style.width="100%";
total.innerHTML = "100%";
}else{
bar.style.background="#cc3300";
total.innerHTML = "上传失败";
}
var directory=document.getElementById("directory").value;
if(directory!=null && directory!=""){
for(var i=0;i<uploader.files.length;i++){
if(uploader.files[i]==file){
uploader.settings.multipart_params.dir='';
uploader.settings.multipart_params.dirDesc='';
uploader.settings.multipart_params.directoryId=result.preId;
nextStatus="next";
if(uploader.total.uploaded==uploader.files.length){
uploader.settings.multipart_params.directoryId="";
}
}

}

}

}

});
//删除
$(document).on("click",".removeFile",function(){
$(this).parent('div').parent('li').remove();
//uploader.removeFile($(this).attr("data-val"));
var toremove = "";
var id=$(this).attr("data-val");
for(var i in uploader.files){
if(uploader.files[i].id === id){
toremove = i;
};
}
uploader.files.splice(toremove, 1);
/* console.log("XXX"+$(this).attr("data-val")); */
});
//进度条设置
uploader.bind('UploadProgress',function(uploader,file){
fileId=file.id;
if(file.size>=102400){
process=1;
}else {
process=5;
}
run(file.id,process);
});
//全部上传完成
uploader.bind('UploadComplete',function(uploader,files){
$('#filelist')[0].innerHTML="您选择的文件已经全部上传，总计共"+uploader.total.uploaded+"个文件"; });
//上传按钮
$('#upload-btn').click(function(){

if(uploader.files.length>0){

uploader.start();

} else {
alertBox({content: '请选择至少一个文件上传！', lock: true, drag: false,ok: function(){
},cancel: false});
return false;
}
return false;
});
//进度条设置
function run(fileId,process){
bar = document.getElementById("progress-"+fileId);
total = document.getElementById("percent-"+fileId);
if(bar.style.width == "95%"){
return ;
}else{
bar.style.width=parseInt(bar.style.width) +process+ "%";
total.innerHTML = bar.style.width;
if(bar.style.width == "95%"){
window.clearTimeout(timeout);
return;
}
var timeout=window.setTimeout("run(fileId,process)",100);
}

}

</script>

springMVC后台接收代码

MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
MultiValueMap<String, MultipartFile> map = multipartRequest.getMultiFileMap();
Iterator<String> iter = map.keySet().iterator();
while(iter.hasNext()) {
String str = (String) iter.next();
List<MultipartFile> fileList = map.get(str);
for (MultipartFile operatorPag1 : fileList) {
if(operatorPag1.isEmpty()) continue;
fileType1 = operatorPag1.getOriginalFilename();
int k = fileType1.length();
for (int i = 0; i < fileType1.length(); i++) {
if (fileType1.substring(i, i + 1).equals("."))

{
fileType = fileType1.substring(i + 1, k).replace(" ", "");
fileName = fileType1.substring(0, i);

}