WebUploader百度上传结合fastdfs分布式文件存储系统

最新推荐文章于 2024-04-12 04:50:04 发布

stackcsdn

最新推荐文章于 2024-04-12 04:50:04 发布

阅读量816

点赞数

本文链接：https://blog.csdn.net/stackCSDN/article/details/80362906

版权

@RestController
public class FileUploadController {

    @RequestMapping(value = "fileUpload",method = RequestMethod.POST)
    public String fileUpload(@RequestParam("file") MultipartFile file) throws IOException, MyException {
        if(file!=null){
            System.out.println("multipartFile = " + file.getName()+"|"+file.getSize());
        }
            String configFile = this.getClass().getResource("/tracker.conf").getFile();
            ClientGlobal.init(configFile);
            TrackerClient trackerClient=new TrackerClient();
            TrackerServer trackerServer=trackerClient.getConnection();
            StorageClient storageClient=new StorageClient(trackerServer,null);
            String filename=    file.getOriginalFilename();
            String extName = StringUtils.substringAfterLast(filename, ".");

            String[] upload_file = storageClient.upload_file(file.getBytes(), extName, null);
            String fileUrl="";
            for (int i = 0; i < upload_file.length; i++) {
                String path = upload_file[i];
                fileUrl+="/"+path;
            }


        return "http://file.service.com"+fileUrl;


    }

需要在resource目录下建立tracker.conf文件

tracker_server=192.168.220.129:22122

# 连接超时时间，针对socket套接字函数connect，默认为30秒
connect_timeout=30000

# 网络通讯超时时间，默认是60秒
network_timeout=60000

<!DOCTYPE html>
<html lang="UTF-8">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/doc.min.css">
    <link rel="stylesheet" href="webuploader/webuploader.css">
    <style>
        .tree li {
            list-style-type: none;
            cursor:pointer;
        }
    </style>
</head>

<body>

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <div><a class="navbar-brand" style="font-size:32px;" href="user.html">教师平台 - 添加讲师</a></div>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right">
                <li style="padding-top:8px;">
                    <div class="btn-group">
                        <button type="button" class="btn btn-default btn-success dropdown-toggle" data-toggle="dropdown">
                            <i class="glyphicon glyphicon-user"></i> 管理员 <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu" role="menu">
                            <li><a href="#"><i class="glyphicon glyphicon-cog"></i> 个人设置</a></li>
                            <li><a href="#"><i class="glyphicon glyphicon-comment"></i> 消息</a></li>
                            <li class="divider"></li>
                            <li><a href="login.html"><i class="glyphicon glyphicon-off"></i> 退出系统</a></li>
                        </ul>
                    </div>
                </li>
                <li style="margin-left:10px;padding-top:8px;">
                    <button type="button" class="btn btn-default btn-danger">
                        <span class="glyphicon glyphicon-question-sign"></span> 帮助
                    </button>
                </li>
            </ul>
            <form class="navbar-form navbar-right">
                <input type="text" class="form-control" placeholder="Search...">
            </form>
        </div>
    </div>
</nav>

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-3 col-md-2 sidebar">
            <div class="tree">
                <ul style="padding-left:0px;" class="list-group">
                    <li class="list-group-item tree-closed" >
                        <a href="main.html"><i class="glyphicon glyphicon-dashboard"></i> 控制面板</a>
                    </li>

                    <li class="list-group-item">
                        <span><i class="glyphicon glyphicon-ok"></i> 教师管理 <span class="badge" style="float:right">3</span></span>
                        <ul style="margin-top:10px;">

                            <li style="height:30px;">
                                <a href="http://www.teacher.com/add.html" style="color:red;"><i class="glyphicon glyphicon-check"></i> 添加讲师</a>
                            </li>
                            <li style="height:30px;">
                                <a href="http://www.teacher.com/index.html"><i class="glyphicon glyphicon-check"></i>教师列表</a>
                            </li>
                        </ul>
                    </li>

                </ul>
            </div>
        </div>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
            <ol class="breadcrumb">
                <li><a href="#">首页</a></li>
                <li><a href="#">数据列表</a></li>
                <li class="active">新增</li>
            </ol>
            <div class="panel panel-default">
                <div class="panel-heading">表单数据<div style="float:right;cursor:pointer;" data-toggle="modal" data-target="#myModal"><i class="glyphicon glyphicon-question-sign"></i></div></div>
                <div class="panel-body">
                    <form role="form" id="teacherForm" method="post" action="http://www.teacher.com/addTeacher.do">
                        <div class="form-group">
                            <label for="name">讲师名称</label>
                            <input type="text" class="form-control" id="name" name="name" placeholder="请输入讲师名称">
                        </div>
                        <div class="form-group">
                            <label for="education">讲师资历</label>
                            <input type="text" class="form-control" id="education" name="education" placeholder="请输入讲师资历">
                        </div>
                        <div class="form-group">
                            <label for="subjectId">讲师专业</label>
                            <input type="text" class="form-control" id="subjectId" name="subjectId" placeholder="请输入讲师专业-数字专业学号ID">
                        </div>
                        <div class="form-group">
                            <label for="isStar">讲师等级</label>
                            <select id="isStar" name="isStar" class="btn btn-default dropdown-toggle"  style="color:#ff0000;" style="height:500px;" style="width:110px;">
                                <option value="1">高级讲师</option>
                                <option value="2">首席讲师</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="career">讲师简介</label>
                            <input height="500px" type="text" class="form-control" id="career" name="career" placeholder="请输入讲师简介">
                        </div>
                        <div class="form-group">
                            <label for="sort">讲师排序</label>
                            <input height="500px" type="text" class="form-control" id="sort" name="career" placeholder="请输入教师排序-数字类型">
                        </div>
                        <div class="form-group">
                            <label for="picPath">上传的图片</label>
                            <input id="picPath" type="hidden" name="picPath">
                            <div id="fileList" class="uploader-list"></div>
                            <button type="button" id="checked">选择图片</button>
                            <button type="button" id="ImgUploadBtn">上传图片</button>
                        </div>
                        <button type="button" id="saveBtn" class="btn btn-success"><i class="glyphicon glyphicon-plus"></i> 新增</button>
                        <button type="button" id="resetBtn" class="btn btn-danger"><i class="glyphicon glyphicon-refresh"></i> 重置</button>
                    </form>

                    <!--<div id="uploadImgs">
                        <a href="#" id="ImgAdd" class="modal-title" iconCls="icon-add" plain="true">添加图片</a>
                        <a href="#" id="ImgUploadBtn" class="modal-title" iconCls="icon-save" plain="true" >图片上传</a><br>
                        <a href="#"  class="modal-title"  iconCls="icon-remove" plain="true">删除</a>
                    </div>-->

                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title" id="myModalLabel">帮助</h4>
            </div>
            <div class="modal-body">
                <div class="bs-callout bs-callout-info">
                    <h4>测试标题1</h4>
                    <p>测试内容1，测试内容1，测试内容1，测试内容1，测试内容1，测试内容1</p>
                </div>
                <div class="bs-callout bs-callout-info">
                    <h4>测试标题2</h4>
                    <p>测试内容2，测试内容2，测试内容2，测试内容2，测试内容2，测试内容2</p>
                </div>
            </div>
            <!--
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
              <button type="button" class="btn btn-primary">Save changes</button>
            </div>
            -->
        </div>
    </div>
</div>
<script src="jquery/jquery-2.1.1.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="script/docs.min.js"></script>
<script src="webuploader/webuploader.js"></script>
<script src="jquery/layer/layer.js"></script>
<script src="jquery/jquery.pagination.js"></script>
<script src="jquery/jquery-form.min.js"></script>

<script type="text/javascript">
    $(function () {
        $(".list-group-item").click(function(){
            if ( $(this).find("ul") ) {
                $(this).toggleClass("tree-closed");
                if ( $(this).hasClass("tree-closed") ) {
                    $("ul", this).hide("fast");
                } else {
                    $("ul", this).show("fast");
                }
            }
        });
        initUploader();
    });
    function initUploader() {
        //首先创建Web Uploader实例
        var uploader = WebUploader.create({
            auto: false, // 选完文件后，是否自动上传
            swf: 'js/Uploader.swf', // swf文件路径
            server: 'fileUpload', // 文件接收服务端
            pick: '#checked', // 选择文件的按钮。可选
            duplicate: true,// 重复上传图片，true为可重复false为不可重复
            // 只允许选择图片文件。
            accept: {
                title: 'Images',
                extensions: 'gif,jpg,jpeg,bmp,png',
                mimeTypes: 'image/*'
            }

        });
        //接着监听fileQueued事件，即当有文件添加进来的时候，通过uploader.makeThumb来创建图片预览图。
        uploader.on('fileQueued', function (file) {
            var $list = $("#fileList"),
                $li = $(
                    '<div id="' + file.id + '" class="file-item thumbnail">' +
                    '<img>' +
                    '<div class="info">' + file.name + '</div>' +
                    '</div>'
                ),
                $img = $li.find('img');


            // $list为容器jQuery实例
            $list.append($li);

            // 创建缩略图
            uploader.makeThumb(file, function (error, src) {
                if (error) {
                    $img.replaceWith('<span>不能预览</span>');
                    return;
                }

                $img.attr('src', src);
            }, 100, 100); //100x100为缩略图尺寸
        });
        // 文件上传过程中创建进度条实时显示。
        uploader.on('uploadProgress', function (file, percentage) {
            var $li = $('#' + file.id),
                $percent = $li.find('.progress span');

            // 避免重复创建
            if (!$percent.length) {
                $percent = $('<p class="progress"><span></span></p>')
                    .appendTo($li)
                    .find('span');
            }

            $percent.css('width', percentage * 100 + '%');
        });

// 文件上传成功，给item添加成功class, 用样式标记上传成功。
        /*uploader.on( 'uploadSuccess', function( file, res ) {
            console.log(res.filePath);//这里可以得到上传后的文件路径
            $( '#'+file.id ).addClass('upload-state-done');
        });*/
        console.log("初始化文件上传控件的响应--uploadSuccess");
        uploader.on('uploadSuccess', function (file, response) {
            console.log("上传完成：" + file.id + "||" + response._raw);
            var fileId = file.id;
            var url = response._raw;
            $("#picPath").val(url);
        });
        
// 文件上传失败，显示上传出错。
        uploader.on('uploadError', function (file) {
            var $li = $('#' + file.id),
                $error = $li.find('div.error');

            // 避免重复创建
            if (!$error.length) {
                $error = $('<div class="error"></div>').appendTo($li);
            }

            $error.text('上传失败');
        });

// 完成上传完了，成功或者失败，先删除进度条。
        uploader.on('uploadComplete', function (file) {
            $('#' + file.id).find('.progress').remove();
        });

        $('#ImgUploadBtn').click(function () {
            console.log("开始上传");
            if (uploader.getFiles().length <= 0) {
                layer.msg("上传图片失败", {time: 1000, icon: 5, shift: 6});
                return;
            }
            uploader.upload();
            layer.msg("上传图片成功", {time:1000, icon:6, shift:6});
        });

    }


  

    $(function(){
        $("#saveBtn").click(function(){
            var loadingIndex=-1;
            var options = {
                url:"http://www.teacher.com/addTeacher.do",
                beforeSubmit : function(){
                    loadingIndex = layer.msg('数据正在保存中', {icon: 6});
                    return true ; //必须返回true,否则,请求终止.
                },
                success : function(result){
                    layer.close(loadingIndex);
                    if(result.success){
                        layer.msg("教师数据保存成功", {time:1000, icon:6});
                        window.location.href="http://www.teacher.com/index.html";
                    }else{
                        layer.msg("教师数据保存失败", {time:1000, icon:5, shift:6});
                    }
                }
            };

            $("#teacherForm").ajaxSubmit(options); //异步提交
            return ;



        });
    });
    $("#resetBtn").click(function(){
        $("#uteacherForm")[0].reset();
    });
</script>
</body>
</html>

@RequestMapping("add.html")
public String toAdd() {
    return "add";
}

@RequestMapping(value = "addTeacher.do", method = RequestMethod.POST)
@ResponseBody
public AjaxResult saveTeacher(EduTeacher eduTeacher) {
    AjaxResult result = new AjaxResult();
    try {
        teacherService.saveTeacher(eduTeacher);
        result.setSuccess(true);
    } catch (Exception e) {
        e.printStackTrace();
        result.setSuccess(false);
    }
    return result;
}