bootstrap fileInput控件上传文件

最新推荐文章于 2023-12-25 14:17:08 发布

coder...

最新推荐文章于 2023-12-25 14:17:08 发布

阅读量213

点赞数

本文链接：https://blog.csdn.net/qq_42122036/article/details/100584543

版权

<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<title>文件上传</title>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="shortcut icon" th:href="@{/img/favicon.ico}" href="../static/img/favicon.ico" type="image/x-icon"/>

<!-- bootstrap3.3.0 -->
<link rel="stylesheet" href="/bootstrap/3.3.0/css/bootstrap.min.css"/>
<link rel="stylesheet" href="/bootstrap/3.3.0/css/bootstrap-theme.min.css"/>
<link href="/css/bootstrap-datetimepicker.min.css" rel="stylesheet"/>
<link hrel="stylesheet" href="/css/bootstrap-treeview.min.css"/>
<link href="/css/fileinput.css" rel="stylesheet"/>
<link href="/css/toastr.min.css" rel="stylesheet"/>
<script type="text/javascript" src="/js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript" src="/js/bootstrap-treeview.min.js"></script>


<body style="padding-top: 70px;">
<div class="container" id="edit_actor">
    <div>
        <div class="row clearfix">
            <div class="col-md-12 column">
                <div class="panel-body">
                    <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
                        <div class="panel panel-primary">
                            <div class="panel-heading" role="tab" id="headingEight">
                                <h4 class="panel-title">
                                    <a class="collapsed" data-toggle="collapse" data-parent="#accordion"
                                       href="#collapseEight" aria-expanded="false" aria-controls="collapseEight">
                                        文件上传
                                    </a>
                                </h4>
                            </div>
                            <div class="panel-body">
                                <div class="form-group">
                                    <form class="form-horizontal col-sm-8" role="form">
                                        <div class="form-group">
                                            <label for="category" >类型:</label>
                                            <input id="category" type="cat" class="form-control" placeholder="NETWORK_DRAMA"/>
                                        </div>
                                        <div class="form-group">
                                            <label for="sheet-id" >下标:</label>
                                            <input id="sheet-id" class="form-control" placeholder="0"/>
                                        </div>
                                        <div class="form-group">
                                            <label for="path" >路径:</label>
                                            <input id="path" class="form-control" placeholder="上传路径"/>
                                        </div>
                                        <div class="form-group">
                                            <form id="form" action="/fileUpload" method="post" enctype="multipart/form-data">
                                            <div class="row form-group">
                                                <label class="col-md-4">文件上传:</label>
                                                <div class="col-sm-12">
                                                    <input id="input-id" name="uploadFile" type="file" multiple
                                                           class="file-loading" data-show-caption="true">
                                                </div>
                                            </div>
                                        </form>
                                        </div>
                                        <div class="form-group">
                                            <button id="add_excel_info" type="button" class="btn btn-default"> 确定 </button>
                                        </div>
                                    </form>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <input type="hidden" id="csrf" th:name="${_csrf.parameterName}" th:value="${_csrf.token}"/>

</div>
<script src="/js/vue.js" type="application/javascript"></script>
<script src="/js/plupload/plupload.full.min.js"></script>
<script type="text/javascript" src="/js/fileinput.js"></script>
<script type="text/javascript" src="/js/fileinput_locale_zh.js"></script>
<script type="text/javascript" src="/js/uploadFile.js"></script>
</body>
</html>


$(function () {
    initFileInput("input-id");
})

function initFileInput(ctrlName) {

    var control = $('#' + ctrlName);
    control.fileinput({
        language: 'zh', //设置语言
        // uploadUrl: "/fileUpload?_csrf=" + $('#csrf').val(), //上传的地址
        uploadUrl: "/uploadFile?_csrf=" + $('#csrf').val(), //上传的地址
        allowedFileExtensions: ['xls', 'xlsx'],//接收的文件后缀
        uploadAsync: true, //默认异步上传
        showUpload: true, //是否显示上传按钮
        showRemove: true, //显示移除按钮
        showPreview: true, //是否显示预览
        showCaption: false,//是否显示标题
        browseClass: "btn btn-primary", //按钮样式
        enctype: 'multipart/form-data',
        validateInitialCount: true,
        previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
        msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",

    }).on('filepreupload', function (event, data, previewId, index) {     //上传中
        var form = data.form, files = data.files, extra = data.extra,
            response = data.response, reader = data.reader;
        console.log('文件正在上传');
    }).on("fileuploaded", function (event, data, previewId, index) {    //一个文件上传成功
        var form = data.form, files = data.files, extra = data.extra,
            response = data.response, reader = data.reader;

        var res = data.response;
        $("#path").val(res)
        console.log("文件上传成功")

    }).on('fileerror', function (event, data, msg) {  //一个文件上传失败
        console.log('文件上传失败！' + data.id);


    })
}

$("#add_excel_info").click(function () {

    var category = $("#category").val();
    var sheet_id = $("#sheet-id").val();
    var path = $("#path").val();

    $.ajax({
        url: '/',
        type: 'GET',
        // headers: {'Content-Type': 'application/json'},
        data: {
           xxxxx
        },
        success: function (data) {
            alert("添加成功!");
            get_magazine_awards();
        }
    });
});

Controller

 @RequestMapping("/fileUpload")
    @ResponseBody
    public String fileUpload(HttpServletRequest request,@RequestParam(value = "uploadFile") MultipartFile uploadFile) throws IOException {
        if(uploadFile.isEmpty()){
            return "false";
        }
        String fileName = uploadFile.getOriginalFilename();

        String path = "F:\\";
        File dest = new File(path + "/" + fileName);
        if(!dest.getParentFile().exists()){ //判断文件父目录是否存在
            dest.getParentFile().mkdir();
        }
        try {
            uploadFile.transferTo(dest); //保存文件
            return path;
        } catch (Exception e) {
            e.printStackTrace();
            return "false";
        }
    }

coder...

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
bootstrap fileInput控件上传文件

<!DOCTYPE html><html lang="zh-CN" xmlns:th="http://www.thymeleaf.org"><title>文件上传</title><meta charset="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edg...
复制链接

扫一扫