使用bootstrap-fileinput实现文件上传

JSP：

<script type="text/javascript">
    $('#testFile').fileinput({//初始化上传文件框
        showUpload: true,//是否显示上传总按钮
        showRemove: true,//是否显示移除总按钮
        uploadAsync: true,//默认异步上传
        uploadLabel: "上传",//设置上传按钮的汉字
        uploadClass: "btn btn-primary",//设置上传按钮样式
        showCaption: false,//是否显示标题
        language: "zh",//配置语言
        uploadUrl: "${contextPath}/sys/sc/doUpload",
        maxFileSize: 1024 * 1024 * 1024 * 10,//单位为kb，如果为0表示不限制文件大小
        maxFileCount: 20, /*允许最大上传数，可以多个，当前设置单个*/
        // enctype: 'multipart/form-data',
        //allowedPreviewTypes : [ 'image' ],
        // allowedFileTypes: ['image', 'video', 'flash'],
        // allowedFileExtensions : ["jpg", "doc","docx"],//接收的文件后缀
        msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
        dropZoneTitle: "请通过拖拽文件放到这里",
        dropZoneClickTitle: "或者点击此区域添加文件",
        //uploadExtraData: {"id": 1, "fileName":'123.mp3'},//这个是外带数据
        showBrowse: false,
        showPreview: true,
        browseOnZoneClick: true,
        dropZoneEnabled: true,//是否显示拖拽区域
        layoutTemplates: {
            // actionDelete:'', //去除上传预览的缩略图中的删除图标
            // actionUpload: '',//去除上传预览缩略图中的上传图片；
            actionZoom: '' //去除上传预览缩略图中的查看详情预览的缩略图标。
        },
        slugCallback: function (filename) {
            return filename.replace('(', '_').replace(']', '_');
        }
    });
    //上传文件成功，回调函数
    $('#testFile').on("fileuploaded", function (event, data, previewId, index) {
        var result = data.response; //后台返回的json
        doQueryScxx(1);
    });

</script>

HTML:

<body>
<input  multiple>
</body>

Controller:

@RequestMapping("/doUpload")
public void updatePhoto(HttpServletRequest request, HttpServletResponse response, @RequestParam("testFile") MultipartFile myFile) {
    try {
        TransactionResult t = this.uploadService.doUpload(request, response, myFile);
        writeJSON(response, t);
    } catch (Exception e) {
        logger.error(ExceptionUtil.getExceptionMessage(e));
    }
}

Service:

public TransactionResult doUpload(HttpServletRequest request, HttpServletResponse response, MultipartFile myFile) throws Exception {
    TransactionResult t = ObjectUtil.getTransactionResult();
    t.setResultMessage("上传失败！");
    String ip = ObjectUtil.getSession().getIpName();
    try {
        Properties properties = new Properties();
        InputStream instream = this.getClass().getResourceAsStream("../../../../../DataSource.properties");
        properties.load(instream);
        String dataPath = properties.getProperty("filePath");/*获取文件路径*/

        Calendar cal = Calendar.getInstance();
        int month = cal.get(Calendar.MONTH) + 1;
        int year = cal.get(Calendar.YEAR);
        StringBuffer savePaths = new StringBuffer();
        savePaths.append(year + "/");
        savePaths.append(month + "/");
        StringBuffer filePath = new StringBuffer();
        filePath.append(dataPath);
        filePath.append(savePaths.toString());

        //图片名称
        String name = ObjectUtil.getSequencesId();
        //文件后缀名
        String ext = FilenameUtils.getExtension(myFile.getOriginalFilename());
        //相对路径
        String path = name + "." + ext;
        //文件前缀名
        String fjmc = FilenameUtils.getBaseName(myFile.getOriginalFilename());

        File file = new File(filePath.toString());
        if (!file.exists()) {
            file.mkdirs();
        }
        myFile.transferTo(new File(filePath + path));

        TestInfoFjxx fjxx = new TestInfoFjxx();
        fjxx.setXh(ObjectUtil.getSequencesId());
        fjxx.setFjmc(fjmc);
        fjxx.setFjlj(savePaths + path);
        fjxx.setLrrDm(ObjectUtil.getSession().getUserXh());
        fjxx.setLrrq(DateConvertUtil.getAcceptDate());
        t = this.uploadDao.doUpload(fjxx, RzxxUtil.acceptRzls("【上传】--保存上传文件信息", myFile.getOriginalFilename(), ip));
        if (t.isResultBoolean()) {
            t.setResultMessage("上传成功！");
        }
    } catch (Exception e) {
        logger.error(ExceptionUtil.getExceptionMessage(e));
        t.setResultMessage("系统异常！");
    }
    return t;
}

可以结合oss将文件保存到云端返回云端存储地址

使用bootstrap-fileinput实现文件上传

相关推荐