前端组件:uploadify和webuploader。
使用uploadify,允许一次上传多个文件。使用的flash版本的(官方下载地址和API文档)。
下载解压放入项目中:
前端代码:
要有jquery
<script type="text/javascript" src="static/ace/js/jquery.js"></script>
<!-- 上传插件 --> <link href="plugins/uploadify/uploadify.css" rel="stylesheet" type="text/css"> <script type="text/javascript" src="plugins/uploadify/jquery.uploadify.min.js"></script>
<form action="rest/file/save" name="Form" id="Form" method="post" enctype="multipart/form-data"> <table> <tr> <td style="width:75px;text-align: right;padding-top: 13px;" id="filePathn"> 文件: </td> <td> <input type="file" name="File_name" id="uploadify1" keepDefaultStyle = "true"/> <input type="hidden" name="filePath" id="filePath" value=""/> </td> </tr> <tr> <td style="text-align: center;" colspan="10"> <a onclick="save()">保存</a> <a onclick="top.Dialog.close();">取消</a> </td> </tr> </table> </form>
function save(){ $('#uploadify1').uploadify('upload', '*'); //手动的上传,'*'表示全部上传 }
$(function () { $("#uploadify1").uploadify({ //指定swf文件 'swf': '<%=basePath%>plugins/uploadify/uploadify.swf', //后台处理的页面 'uploader': '<%=basePath%>rest/file/uploadFile', 'progressData' : 'speed', //按钮显示的文字 'buttonImage': '<%=basePath%>static/images/fileup.png', //显示的高度和宽度,默认 height 30;width 120 //'height': 15, //'width': 80, //上传文件的类型 默认为所有文件 'All Files' ; '*.*' //在浏览窗口底部的文件类型下拉菜单中显示的文本 'fileTypeDesc': 'Image Files', 'queueSizeLimit':3, //允许上传 最大为999 //允许上传的文件后缀 //'fileTypeExts': '*.gif; *.jpg; *.png', 'cancel': '<%=basePath%>plugins/uploadify/uploadify-cancel.png', //上传文件页面中,你想要用来作为文件队列的元素的id, 默认为false 自动生成, 不带# //'queueID': 'fileQueue', //选择文件后自动上传 'auto': false, //true 为自动上传 //设置为true将允许多文件上传 'multi': true, 'overrideEvents': ['onSelectError','onDialogClose'], //这段代码是重写接口,自定义错误消息弹出窗口 'onUploadSuccess' : function(file,data,response) { //每成功一次上传触发 data =JSON.parse(data); //后台返回json $("#filePath").val(data.name); //文件名称即为数据库的路径 }, 'onQueueComplete' : function(queueData) { // 队列中的文件上传之后触发 alert('全部上传完成') }, 'onCancel' : function(file) { alert('取消上传'); }, 'onSelect' : function(file) { alert('每上传完一次触发一次'); }, 'onSelectError':function(file,errorCode){ //选择文件错误的时候触发 switch (errorCode) { case -100: alert("上传的文件数量已经超出系统限制的" + $('#uploadify1').uploadify('settings', 'queueSizeLimit') + "个文件!"); break; case -110: alert("文件 [" + file.name + "] 大小超出系统限制的" + $('#uploadify1').uploadify('settings', 'fileSizeLimit') + "大小!"); break; case -120: alert("文件 [" + file.name + "] 大小异常!"); break; case -130: alert("文件 [" + file.name + "] 类型不正确!"); break; } return false; } });
/** * 支持上传多个 * @param request * @param response * @throws IllegalStateException * @throws IOException */ @RequestMapping("/uploadFile") @ResponseBody public String uploadFile(HttpServletRequest request,HttpServletResponse response) throws IllegalStateException, IOException { CommonsMultipartResolver multipartResolver = new CommonsMultipartResolver(request.getSession().getServletContext()); Map<String, String> map = new HashMap<String,String>(); String fileName = ""; //文件名 if(multipartResolver.isMultipart(request)) { MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest) request; //获取multiRequest 中所有的文件名 Iterator<String> iter=multiRequest.getFileNames(); while(iter.hasNext()) { //一次遍历所有文件 MultipartFile file=multiRequest.getFile(iter.next().toString()); if(file!=null) { fileName = file.getOriginalFilename(); String path = "E://file"+File.separator+fileName; file.transferTo(new File(path)); } } } map.put("name", fileName); ObjectMapper mapper = new ObjectMapper(); String json = mapper.writeValueAsString(map); return json; }去路径查找,已经上传成功。未完