【bootstrap-fileinput】前后台完整示例

首先给大家推荐一下我老师大神的人工智能教学网站。教学不仅零基础,通俗易懂,而且非常风趣幽默,还时不时有内涵黄段子!点这里可以跳转到网站

效果图:

HTML:

<!-- 引入css文件 --><link rel="stylesheet" type="text/css" href="css/fileinput.min.css"/><!-- 引入js文件 --><script type="text/javascript" src="js/fileinput.min.js"></script><script type="text/javascript" src="js/zh.js"></script> <div class="modal-body">    <a href="" class="form-control" style="border:none;">下载模板</a>    <input type="file" name="reportFile" id="reportFile" multiple class="file-loading" /></div>

JS:

    //初始化fileinput    var oFileInput = new FileInput();    //参数1:控件id、参数2:上传地址    oFileInput.Init("reportFile", "/report/uploadReport"); 
    //初始化fileinput    var FileInput = function () {        var oFile = new Object();         //初始化fileinput控件(第一次初始化)        oFile.Init = function(ctrlName, uploadUrl) {            var control = $('#' + ctrlName);             //初始化上传控件的样式            control.fileinput({                language: 'zh',                                         //设置语言                uploadUrl: uploadUrl,                                   //上传的地址                allowedFileExtensions: ['jpg', 'gif', 'png', 'pdf'],    //接收的文件后缀                showUpload: true,                                       //是否显示上传按钮                showCaption: false,                                     //是否显示标题                browseClass: "btn btn-primary",                         //按钮样式                     //dropZoneEnabled: false,                               //是否显示拖拽区域                //minImageWidth: 50,                                    //图片的最小宽度                //minImageHeight: 50,                                   //图片的最小高度                //maxImageWidth: 1000,                                  //图片的最大宽度                //maxImageHeight: 1000,                                 //图片的最大高度                //maxFileSize: 0,                                       //单位为kb,如果为0表示不限制文件大小                //minFileCount: 0,                maxFileCount: 10,                                       //表示允许同时上传的最大文件个数                enctype: 'multipart/form-data',                validateInitialCount:true,                previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",                msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}!",                uploadExtraData:function (previewId, index) {           //传参            	    var data = {                        "reportGroupId": $('#lbl_groupId').html(),      //此处自定义传参                    };                    return data;                }            });             //导入文件上传完成之后的事件            $("#reportFile").on("fileuploaded", function (event, data, previewId, index) {                //报告table刷新                showDataGrid_report($('#lbl_groupId').html());            });        }        return oFile;    };

JAVA:

    /**     * 报告上传     * */    @RequestMapping(value = "/uploadReport", method = RequestMethod.POST)    public ApiResponse uploadReport(HttpServletRequest request, HttpServletResponse response) {        Map<String, Object> result = new HashMap<String, Object>();        //获取参数        String reportGroupId = getParam(request, "reportGroupId");                //调用通用接口上传文件        result = uploadFile(request, "reportFile", reportGroupId);                ApiResponse ret = new ApiResponse();        ret.setMap(result);        return ret;    }         /**     * 上传文件通用接口     *      * @param request           请求体     * @param dstFileName       html上传组件中(input中name属性),上传文件体名称,通过此名称获取所有上传的文件map     * @param reportGroupId     (特殊)上传报告所述报告组id     * */    protected Map<String, Object> uploadFile(HttpServletRequest request, String dstFileName, String reportGroupId) {        Map<String, Object> ret = new HashMap<String, Object>();                //判断保存文件的路径是否存在        File fileUploadPath = new File(FILE_UPLOAD_PATH);        if (!fileUploadPath.exists()) {            fileUploadPath.mkdir();        }                if (ServletFileUpload.isMultipartContent(request)) {            MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;            List<MultipartFile> fileList = multipartRequest.getFiles(dstFileName);            for (MultipartFile item : fileList) {                String fileName = "";        //当前上传文件全名称                String fileType = "";        //当前上传文件类型                String saveFileName = "";    //保存到服务器目录的文件名称                String reportAddr = "";      //保存到服务器目录的文件全路径                try {                    fileName = item.getOriginalFilename();                    fileType = item.getContentType();                    saveFileName = getCurrentTime("yyyyMMddHHmmss") + "_" + fileName;                    reportAddr = fileUploadPath + "/" + saveFileName;                    reportAddr = reportAddr.replace("/", File.separator).replace("\\", File.separator);                                        File savedFile = new File(fileUploadPath, saveFileName);                    item.transferTo(savedFile);                                       //上传文件成功,保存文件信息到表reportDetail                    Map<String, Object> param = new HashMap<String, Object>();                    param.put("reportGroupId", reportGroupId);                    param.put("reportName", fileName);                    param.put("reportType", fileType);                    param.put("reportAddr", reportAddr);                    param.put("createTime", getCurrentTime("yyyy-MM-dd HH:mm:ss"));                    param.put("lastOper", "xxxxxxx");                    ApiResponse r = (ApiResponse) saveEntity("/report/saveReportDetail", param, ApiResponse.class);                                        if (r.getCode() == 0) {                        ret.put("success", true);                    } else {                        ret.put("success", false);                        ret.put("message", r.getMessage());                    }                } catch (Exception e) {                    logger.error(e.getMessage());                    ret.put("success", false);                    ret.put("message", e.getMessage());                }            }        }        return ret;    }

PS:后台接收文件时用了for循环,其实bootstrap-fileinput插件在多文件上传时,是采用多次调用’uploadUrl’实现文件上传,所以当前for循环只执行了一遍。然后返回结果给页面,页面对当前文件上传状态做处理。

点这里可以跳转到人工智能网站