【插件】uploadify上传，解决spring MVC上传配置冲突

最新推荐文章于 2018-10-26 16:28:00 发布

原创最新推荐文章于 2018-10-26 16:28:00 发布 · 321 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#插件

Jquery 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何在SpringMVC框架中实现文件上传功能，包括控制器代码和前端JSP页面的实现方式。通过示例代码展示了如何配置上传路径、处理上传文件及返回结果。

解决spring MVC上传配置冲突。保留springmvc的配置，修改controller中的代码。

controller

@Controller
public class UploadController {
    @RequestMapping("/toUpload")
    public String page(){
        return "upload";
    }
    @RequestMapping("/upload")
    @ResponseBody
    public String uploadifyUpload(@RequestParam(value = "file") MultipartFile[] files, String key, Integer num) throws IOException {
        String savePath = "D:\\snsoft-upload";
        savePath = savePath + "\\uploads\\";
        File f1 = new File(savePath);
        if (!f1.exists()) {
            f1.mkdirs();
        }
        String name = "";
        String extName = "";
        for (MultipartFile mf : files) {    
            if(!mf.isEmpty()){    
                name = mf.getOriginalFilename();
                long size = mf.getSize();
                String type = mf.getContentType();
                 System.out.println(size + " " + type);
                 if (name == null || name.trim().equals("")) {
                     continue;
                 }
                 //扩展名格式：  
                 if (name.lastIndexOf(".") >= 0) {
                     extName = name.substring(name.lastIndexOf("."));
                 }
                 File file = null;
                 do {
                     //生成文件名：
                     name = System.currentTimeMillis()+"";
                     file = new File(savePath + name + extName);
                 } while (file.exists());
                 File saveFile = new File(savePath + name + extName);
                 try {
                     mf.transferTo(saveFile);
                 } catch (Exception e) {
                     e.printStackTrace();
                 }
            }    
        } 
        return name + extName;
    }
}

jsp

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"
            +request.getServerName()+":" + request.getServerPort()
            + path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="<%=basePath%>">
<meta http-equiv="keywords" content="Pess">
<meta http-equiv="description" content="Pess">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="renderer" content="webkit">
<title>上传</title>
<script type="text/javascript" src="static/js/jquery-1.7.2.min.js"></script>
<link href="plug-in/uploadify/uploadify.css" rel="stylesheet" type="text/css"/>
<script src="plug-in/uploadify/jquery.uploadify.js" type="text/javascript"></script>
<script src="plug-in/uploadify/jquery.uploadify.min.js" type="text/javascript"></script>
<style type="text/css">
/* #fileQueue{
    background-color: #fff;
    border-radius: 3px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.25);
    height:103px;
    margin-bottom: 10px;
    overflow: auto;
    padding: 5px 10px;
    width: 300px;
} */
</style>
</head>
<body>
<div id="fileQueue"></div>
<a id="uploadify">开始上传</a>
<a href="javascript:$('#uploadify').uploadify('cancel')">取消上传</a>
<input type="text">
</body>
<script type="text/javascript">
$(function () {
    $("#uploadify").uploadify({
        'swf' : 'plug-in/img/uploadify.swf',
        'uploader' : '/upload',         //controller上传请求路径
        'fileObjName' : 'file', //类似表单提交的name
        'formData' : {'key':'value','num':2},//可以附加传值
        'fileTypeExts' : '*.gif; *.jpg; *.png',//允许上传的文件后缀  默认为所有文件 'All Files';'*.*'
        'fileSizeLimit' : '20kb',//上传文件大小限制,默认单位KB
        'progressData' : 'percentage',  //speed:上传速度;   percentage:上传百分比;
        'fileTypeDesc': 'Image Files',//在浏览窗口底部的文件类型下拉菜单中显示的文本
        'buttonText' : '上传文件',//按钮显示的文字
        'buttonClass' :'btn',//为按钮添加class
        'height': 30,//按钮高度,默认 height 30
        'width': 120,//按钮宽度,默认 width 120
        'cancel': 'plug-in/img/uploadify-cancel.png',
        //'queueID': 'fileQueue',//上传文件页面中，你想要用来作为文件队列的元素的id, 默认为false
        'auto': true,//选择文件后自动上传
        'multi': true,//设置为true将允许多文件上传
        'onUploadComplete' : function(file) {
             alert('上传完成');
         },
         'onUploadSuccess' : function (file, data, response) {
             alert(file.name+"|"+data);
         },
         'onUploadError' : function(file, errorCode, errorMsg, errorString) {
             alert('The file' + file.name + ' could not be uploaded: ' + errorString);
         },
        'onCancel' : function(file) {
             alert('取消上传');
         }
    });
});

</script>
</html>