Uploadify是JQuery的一个上传插件主要功能是批量上传文件
支持单文件或多文件上传,可控制并发上传的文件数
在服务器端支持各种语言与之配合使用,诸如PHP,.NET,Java……
通过参数可配置上传文件类型及大小限制
通过参数可配置是否选择文件后自动上传
易于扩展,可控制每一步骤的回调函数(onSelect, onCancel……)
通过接口参数和CSS控制外观
引入uploadify的工具包
<link rel="stylesheet" href="<%=request.getContextPath()%>/js/uplodify/uploadify.css" type="text/css" /> <script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-1.9.1.js"></script> <script type="text/javascript" src="<%=request.getContextPath() %>/js/uplodify/jquery.uploadify.min.js"></script>
<div id="attachs"></div> //进度条显示 <input type="hidden" id="fujianIds" name="ids"/> //上传后地址保存在数据库返回的id集合, <input type="file" id="file_upload" name="userAttach"/> <a href="javascrit:;" onclick="javascript:$('#file_upload').uploadify('upload','*')" class="button icon add">上传</a> <a href="javascrit:;" onclick="javascript:$('#file_upload').uploadify('cancel', '*')" class="button icon add">取消上传</a>
<script type="text/javascript"> var v_attrchids= ""; $(document).ready(function() { $("#file_upload").uploadify({ 'auto':false,//是否自动上传 'successTimeout':99999, //超时时间上传成功后,将等待服务器的响应时间: 单位:秒 'formData':{ //附带值 JSON对象数据,将与每个文件一起发送至服务器端。如果为动态值,请在onUploadStart()中使用settings()方法更改该JSON值 }, 'swf': "<%=request.getContextPath()%>/js/uplodify/uploadify.swf", //flash 'queueID':'uploadfileQueue',//文件选择后的容器div的id值 'fileObjName':'userAttach',//要上传的文件名称 要与后台Action的文件名(hereFile)保持一致 'uploader':'<%=request.getContextPath()%>/user/uploadFile.do',//上传地址 'buttonImage':'<%=request.getContextPath()%>/js/uplodify/background.jpg',//图片按钮 //浏览按钮的大小 'width':'150', 'height':'25', 'fileTypeExts':'*.jpg;*.jpge;*.gif;*.png',//允许上传的文件后缀 'fileSizeLimit':'1000KB',//上传文件的大小限制允许上传文件的最大 大小单位(B, KB, MB, or GB)(0为没有限制) 'queueSizeLimit' : 3,//允许上传的文件的最大数量。 //选择上传文件后调用 'onSelect' : function(file) { //alert("jljklj"); }, //返回一个错误,选择文件的时候触发 'onSelectError':function(file, errorCode, errorMsg){ switch(errorCode) { case -100: alert("上传的文件数量已经超出系统限制的"+$('#file_upload').uploadify('settings','queueSizeLimit')+"个文件!"); break; case -110: alert("文件 ["+file.name+"] 大小超出系统限制的"+$('#file_upload').uploadify('settings','fileSizeLimit')+"大小!"); break; case -120: alert("文件 ["+file.name+"] 大小异常!"); break; case -130: alert("文件 ["+file.name+"] 类型不正确!"); break; } }, //检测FLASH失败调用 'onFallback':function(){ alert("您未安装FLASH控件,无法上传图片!请安装FLASH控件后再试。"); }, //上传到服务器,服务器返回相应信息到data里 'onUploadSuccess':function(file, data, response){ var attach= eval("("+data+")"); v_attrchids += "," + attach.id; $('#attachs').append('<span id="fujian_'+attach.id+'">'+'<img src=<%=request.getContextPath()%>'+attach.path+' height="50" width="50">'+'<a href="javascript:;" onclick="delFujian('+attach.id+');">删除</a></span>'); $("#fujianIds").val(v_attrchids); }, //当单个文件上传出错时触发 'onUploadError': function (file, errorCode, errorMsg, errorString) { // alert("上传失败"); // alert(文件 ["+file.name+"] + ' 上传失败: ' + errorString); } }); }); var basePath = "${ctx }"; document.write("<script type='text/javascript' " + "src='"+basePath+"/js/uploadify/jquery.uploadify-3.1.js?" + new Date() + "'></s" + "cript>"); </script>
后台处理
uploadify是基于ajax
private UserAttach userAttachDto =new UserAttach(); private String ids; //上传文件 必须与前jsp页面中uploadify中参数 'fileObjName':'demo1' 保持一致 private File userAttach; //文件名 命名规则 按照 上传文件+ FileName 会自动匹配相应文件名 private String userAttachFileName; public void uploadFile(){ //獲取當前要上傳的路徑 String userAttachUrl = getServletContext().getRealPath(getProperty("uploadpath")); //上传地址 if(userAttach!=null){ String[] split = userAttachFileName.split("\\."); String fileLastName=UUID.randomUUID().toString()+"pbw."+split[split.length - 1]; FileUtil.upFile(userAttach, fileLastName, userAttachUrl); String Url=getProperty("uploadpath")+fileLastName; userAttachDto.setUserAttachUrl(Url); userAttachDto.setUserAttachName(fileLastName); System.out.println(Url); userService.insertUserAttach(userAttachDto); int id = userAttachDto.getId();// out("{\"id\":" + id + ",\"path\":\""+Url+ "\"}"); } }