1、引入uploadify的css和js文件
<% String path = request.getContextPath(); %> <link rel="stylesheet" href="<%=path%>/uploadify/uploadify.css" type="text/css"></link> <script type="text/javascript" src="<%=path%>/uploadify/jquery.uploadify-3.1.min.js"></script>
2、配置相关参数和函数
注意:$('#importLispDialog').window('close'); 要在 onUploadComplete 事件中执行,不能在onUploadSuccess里面执行。否则上传完成的文件不会消失。
字段非空的验证要在提交前验证,不能在onUploadStart里验证,否则即使为空,返回false,上传操作仍然会执行
<script type="text/javascript" charset="UTF-8"> var name; var content; $(function() { $("#file_upload").uploadify({ 'height' : 27, 'width' : 80, 'buttonText' : '添加附件', 'swf' : '<%=path%>/uploadify/uploadify.swf', 'uploader' : '<%=path%>/uploadController.do?upload', 'auto' : false, 'fileTypeExts' : '*.*', 'formData' : {'userName':'','content':''}, 'onUploadStart' : function(file) { $("#file_upload").uploadify("settings", "formData", {'userName':name,'content':content}); }, 'onUploadSuccess':function(){ $.messager.show({ msg : '导入成功!', title : '提示' }); }, 'onUploadComplete':function(){ $('#importLispDialog').window('close'); } }); }); function startUpload(){ //校验 name=$('#userName').val(); content=$('#content').val(); if(name.replace(/\s/g,'') == ''){ alert("姓名不能为空!"); return false; }else{ $('#file_upload').uploadify('upload','*'); } } </script>
3、添加file框和超链接
<input type="file" name="uploadify" id="file_upload" /> <hr> <a class="easyui-linkbutton" onclick="startUpload();" href="javascript:void(0);">开始上传</a> <a href="javascript:$('#file_upload').uploadify('cancel', '*')" class="easyui-linkbutton">取消所有上传</a>
4、后台取值,基于SpringMVC
注意创建文件夹要用 file.mkdirs();不能用 file.mkdir();否则在linux下运行失败
@RequestMapping(params = "upload") public String upload(HttpServletRequest request, HttpServletResponse response){ String responseStr=""; MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request; //获取前台传值 String[] userNames = multipartRequest.getParameterValues("userName"); String[] contents = multipartRequest.getParameterValues("content"); String userName=""; String content=""; if(userNames!=null){ userName=userNames[0]; } if(contents!=null){ content=contents[0]; } Map<String, MultipartFile> fileMap = multipartRequest.getFileMap(); //String ctxPath = request.getSession().getServletContext().getRealPath("/")+ "\\" + "images\\"; String ctxPath=request.getSession().getServletContext().getRealPath("/")+configPath; SimpleDateFormat sdf = new SimpleDateFormat("yyyyMM"); String ymd = sdf.format(new Date()); ctxPath += ymd + "/"; //创建文件夹 File file = new File(ctxPath); if (!file.exists()) { file.mkdirs(); } String fileName = null; for (Map.Entry<String, MultipartFile> entity : fileMap.entrySet()) { // 上传文件名 // System.out.println("key: " + entity.getKey()); MultipartFile mf = entity.getValue(); fileName = mf.getOriginalFilename(); String fileExt = fileName.substring(fileName.lastIndexOf(".") + 1).toLowerCase(); SimpleDateFormat df = new SimpleDateFormat("yyyyMMddHHmmss"); String newFileName = df.format(new Date()) + "_" + new Random().nextInt(1000) + "." + fileExt; File uploadFile = new File(ctxPath + newFileName); try { FileCopyUtils.copy(mf.getBytes(), uploadFile); responseStr="上传成功"; } catch (IOException e) { responseStr="上传失败"; e.printStackTrace(); } } return null; }
5、Spring配置文件
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"> <property name="defaultEncoding"> <value>UTF-8</value> </property> <property name="maxUploadSize"> <value>32505856</value><!-- 上传文件大小限制为31M,31*1024*1024 --> </property> <property name="maxInMemorySize"> <value>4096</value> </property> </bean>