plupload实现多文件上传

最新推荐文章于 2022-06-20 00:05:03 发布

我吃西红柿11

最新推荐文章于 2022-06-20 00:05:03 发布

阅读量1.8k

点赞数

文章标签： js html java

本文链接：https://blog.csdn.net/qq_21223653/article/details/107139241

版权

之前很早的项目，使用bootstrap+jsp，需要多文件上传，周末没事翻开记录一下，了解一下，可以查看https://blog.csdn.net/happy_wu/article/details/52288644 能够看到中文版介绍和基本配置；
首先看一下效果：
在这里插入图片描述
点击“选择文件”:

点击“添加文件”：

选择好文件之后如下图：

点击“开始上传”，
上传过程中还会有进度条提示，很不错的体验；而且可以实现文件拖拽上传；
虽然是前端的活，如果让专业前端来做，会做的更漂亮，但是很多项目没办法，技术人员都要前后都要涉及；
下面讲一下具体实现；
1、首先需要引入plupload的js文件：
下载地址：
链接：https://pan.baidu.com/s/1qRTg5FuZ7990XjSBvs6OTQ
提取码：lusk
2、jsp页面：
首先引入js：

<style type="text/css">@import url(<%=path%>/js/plupload/js/jquery.plupload.queue/css/jquery.plupload.queue.css);</style>
<script type="text/javascript" src="<%=path%>/js/plupload/js/plupload.full.js"></script>
<script type="text/javascript" src="<%=path%>/js/plupload/js/jquery.plupload.queue/jquery.plupload.queue.js"></script>
<script type="text/javascript" src="<%=path%>/js/plupload/js/i18n/cn.js"></script>

自定义css（因为我这里弹出框样式不知道直接弹出有问题，在这里做了css修改）

.plupload_filelist_footer {
    border-top: 1px solid #FFF;
    height: 35px;
    line-height: 20px;
    vertical-align: middle;
}

.plupload_filelist_header {
    border-top: 1px solid #EEE;
    border-bottom: 1px solid #CDCDCD;
    height: 25px;
}

#hideModel {
    height: 20px;
    font-size: 10px;
    text-align: center;
    padding: 0px;
    margin-right: 10px;
    width: 40px;
}

.Wdate{
	height: 35px;
}

<tr align="center" style="height: 26px;">
						<td style="width: 33%">01系统拓扑结构及说明</td>
						<td>
                           <button  id="sysTopologyDes" class="col-sm-3" type="button" class="mybtn mybtn82" onclick="showModel(this)" 
							     style="font-family: 微软雅黑;width: 100px">选择文件</button>
						   <div id="sysTopologyDesList" class="col-sm-6" style="border:1px;width:500px">
							
							</div>
						</td>
					</tr>

<!-- 上传文件页面 -->
	<div class="modal fade bs-example-modal-sm" id="myModal2" data-backdrop="static"
			role="dialog" aria-label="myModalLabel" aria-hidden="true"
			style="overflow: auto; height: 100%;">
			<div class="modal-dialog modal-sm" style="width: 600px">
				<div class="modal-content">
					<div class="modal-body" style="padding: 0px;">
					 <div style="width: 580px; margin: 0px auto">
						<form id="formId" action="" method="">
							<div id="uploader">
								
							</div>
						</form>
					 </div>
									
					</div>
					<div class="modal-footer" style="padding: 0px;">
						<button id="hideModel" type="button" class="btn btn-default" data-dismiss="modal">	关闭</button>
					</div>
				</div>
			</div>
		</div>

对应js文件：

//点击上传文件
function showModel(obj){
	  selectedFileTarget = obj.id;
	  initUpLoad();//每次使用重新渲染
	  $("#myModal2").modal("show")	
}

function initUpLoad(){
	//初始化上传页面
		$("#uploader").pluploadQueue({
			runtimes : 'gears,flash,silverlight,browserplus,html5,html4',//用来指定上传方式，指定多个上传方式请使用逗号隔开。一般情况下，你不需要配置该参数
			url : CONTENT_PATH+'/record/file.do',
			max_file_size : '10mb',
			unique_names : true,//当值为true时会为每个上传的文件生成一个唯一的文件名，并作为额外的参数post到服务器端，参数明为name,值为生成的文件名。
			multiple_queues : true,
			chunk_size: '2mb',
			dragdrop: false,
			// Specify what files to browse for
			filters : [ //可以使用该参数来限制上传文件的类型，大小等，该参数以对象的形式传入，它包括三个属性：
			    /* {title : "doc, doc文档", extensions : "jpg,jpeg,png,gif,zip,rar,pdf,docx,doc,xlsx,xls,pptx,ppt,vsd,vsdx"}  */
				{title : "doc, doc文档", extensions : "zip,rar,pdf,docx,doc,xlsx,xls"} 
			],
			flash_swf_url : CONTENT_PATH+'/js/plupload/js/plupload.flash.swf',//当使用flash上传方式会用到该参数。
			silverlight_xap_url : CONTENT_PATH+'/js/plupload/js/plupload.silverlight.xap',//当使用silverlight上传方式会用到该参数。
		});
		var uploader = $('#uploader').pluploadQueue();//获取上传队列
		
		//绑定各种监听事件
	    uploader.bind('StateChanged', function() {//当上传队列的状态发生改变时触发
	    	       var files = uploader.files;
	               if (uploader.files.length === (uploader.total.uploaded + uploader.total.failed)) {
	   		    	for(var i = 0, len = files.length; i<len; i++){
						
					}
		            //alert("全部上传完毕！");
		            $('#uploader_filelist li').remove();//删除缓存
		            $("#hideModel").click();
		                 
	               }
	           });
		//获取每次上传的返回信息
	    uploader.bind('FileUploaded', function(uploader,file,responseObject) {//当上传队列的状态发生改变时触发
	    	//alert(responseObject.response);//返回上传路径
	    	//alert(file.name);
	    	var file_path = responseObject.response.replace(/\\/g,"tag");
	    	var file_name = file.name; //文件名
			var html1 = '<li id="file-' + file.id +'" style="margin-left: 50px;text-align: left;">' + file_name + 
			'&nbsp;&nbsp;&nbsp;&nbsp;<a href="javascript:void(0);" οnclick="delParent(this)" >删除</a>'
			+'<input name="fileInfo" type="hidden" value="'+file_name+'$$'+file_path+'$$'+selectedFileTarget+'" />'
			+'</li> ';
			//var html2 = '<input name="fileName" type="hidden" value="'+file_name+'" />';
			if(selectedFileTarget=="recordProve"){//备案证明
				$(html1).appendTo('#fileNameList');
			}else if(selectedFileTarget=="sysTopologyDes"){//01系统拓扑结构及说明
				$(html1).appendTo('#sysTopologyDesList');
				
			}else if(selectedFileTarget=="sysSecuManage"){//02系统安全组织机构及管理制度
				$(html1).appendTo('#sysSecuManageList');
				
			}else if(selectedFileTarget=="sysSafePlan"){//03系统安全保护设施设计实施方案或改建实施方案
				$(html1).appendTo('#sysSafePlanList');
				
			}else if(selectedFileTarget=="sysSafeLicense"){//04系统使用的安全产品清单及认证、销售许可证明
				$(html1).appendTo('#sysSafeLicenseList');
				
			}else if(selectedFileTarget=="evaluationReport"){//05系统等级测评报告
				$(html1).appendTo('#evaluationReportList');
				
			}else if(selectedFileTarget=="expertReview"){//06专家评审情况
				$(html1).appendTo('#expertReviewList');
				
			}else if(selectedFileTarget=="superAdvice"){//07上级主管部门审批意见
				$(html1).appendTo('#superAdviceList');
				
			}else if(selectedFileTarget=="otherFiles"){//其他附件
				$(html1).appendTo('#otherFilesList');
				
			}
			
	    	
	    	
	    	
	    	
	    });
}

后台实现：

 /*
     * 文件上传
     */
    @RequestMapping(value = "file", method = RequestMethod.POST)
    @ResponseBody
	public String uploadFile(HttpServletRequest request, HttpServletResponse response) throws IllegalStateException, IOException {
		//初始化通用multipart解析器
		CommonsMultipartResolver multipartResolver = new CommonsMultipartResolver(request.getSession().getServletContext());
		String resultPath = null ;
		
 
		//判断请求中是否有文件上传
		if (!multipartResolver.isMultipart(request)) {
			//请求为空，直接返回
			return null;
		}
		//解析请求，将文件信息放到迭代器里   
		MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest) request;
		Iterator<String> iter = multiRequest.getFileNames();
		//迭代文件，存放到某一路径里
		while (iter.hasNext()) {
			//取得上传文件  
			MultipartFile file = multiRequest.getFile(iter.next());
			
			if (null != file) {
				//取得当前上传文件的文件名称  
				String myFileName = file.getOriginalFilename();
				myFileName = myFileName.replaceAll("\\s*", "");
					//判断文件是否存在，文件名为空，则说明文件不存在
					if (myFileName.trim() != "") {
						//重命名上传后的文件名  
						String fileName =this.getName(myFileName);
						//定义上传路径  
						 Register register = registerService.getRegisterByInnerName("RECORD_PORT_FILE_URL");
					        String filePath = null;
					        if (register != null) {
					            filePath = register.getRegisterValue();
					            if (!"\\".equals(filePath.substring(filePath.length() - 1))) {//判断末尾是否有斜杠
					                filePath = filePath + "\\";
					            }
					        }
						File pathFile = new File(filePath);
						if(!pathFile.exists()  && !pathFile.isDirectory())      
						{         
							pathFile.mkdirs();    
						} 
						String path = filePath+fileName;
						File localFile = new File(path);
						file.transferTo(localFile);
						resultPath = path;
						//往数据库里插一条附件信息

					}
			}
		}
		
		return resultPath;
	}

记得plupload上传文件时分段进行，也就是将文件分为四段，然后上传后拼在一起，所以对应进度条好像也是四段。如果文件过大或者上传出现问题，可以看看这一块，是不是出了问题；

好了，一般情况下没有问题，文件拖拽上传一般也用不到，而且有的浏览器没有开启flash，所以还是老老实实点击文件上传靠谱；

我吃西红柿11

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
7
评论
plupload实现多文件上传

之前很早的项目，使用bootstrap+jsp，需要多文件上传，周末没事翻开记录一下：首先看一下效果：点击“选择文件”:点击“添加文件”：选择好文件之后如下图：点击“开始上传”，上传过程中还会有进度条提示，很不错的体验；而且可以实现文件拖拽上传；虽然是前端的活，如果让专业前端来做，会做的更漂亮，但是很多项目没办法，技术人员都要前后都要涉及；下面讲一下具体实现；1、首先需要引入plupload的js文件：下载地址：链接：https://pan.baidu.com/s/1qRTg5
复制链接

扫一扫