springmvc框架下的上传和下载(未完)

前端组件: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;
	}
去路径查找,已经上传成功。未完




猜你喜欢

转载自blog.csdn.net/qq_38384568/article/details/80698166