bootstrap文件上傳fileupload插件

時間 2020-08-13

標籤 bootstrap 文件上傳 fileupload 插件欄目 Bootstarp 简体版

原文原文鏈接

Bootstrap FileInput中文API整理：https://blog.csdn.net/u012526194/article/details/69937741javascript

SpringMVC + bootstrap fileupload 多文件上傳：http://www.javashuo.com/article/p-ttgyehjm-cd.htmlcss

bootstrap fileupload 使用詳解：https://blog.csdn.net/fanxiangru999/article/details/63756730html

源碼以及API地址：java

bootstrap-fileinput源碼：https://github.com/kartik-v/bootstrap-fileinputjquery

bootstrap-fileinput在線API：http://plugins.krajee.com/file-inputgit

bootstrap-fileinput Demo展現：http://plugins.krajee.com/file-basic-usage-demogithub

先後端單文件上傳代碼：json

 @ResponseBody @RequestMapping(value="/upload", method = RequestMethod.POST) public JSONObject upload(@RequestParam("file") MultipartFile file, HttpServletRequest request ) { System.out.println("上傳開始"); JSONObject json = new JSONObject(); json.put("code", "1"); if( file.isEmpty() ) { json.put("msg", "上傳文件爲空"); return json; }else { String savePath = request.getServletContext().getRealPath("/upload/"); String fileName=file.getOriginalFilename(); String pathname = savePath + fileName; File dest = new File(pathname); if( !dest.getParentFile().exists() ) { dest.getParentFile().mkdirs(); } try { file.transferTo(dest); json.put("code", 1); json.put("msg", "上傳成功"); json.put("imgPath", pathname); return json; } catch (Exception e) { json.put("msg", e.getMessage()); return json; } } }

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
    String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/"; %>
<!DOCTYPE html>
<!-- release v4.1.8, copyright 2014 - 2015 Kartik Visweswaran -->
<html lang="en">
    <head>
        <meta charset="UTF-8"/>
        <title>上傳文件測試</title>
        <link href="<%=basePath%>css/bootstrap.min.css" rel="stylesheet">
        <link href="<%=basePath%>css/fileinput.min.css" media="all" rel="stylesheet" type="text/css" />
        <script src="<%=basePath%>js/jquery-3.2.1.min.js"></script>
        <script src="<%=basePath%>js/fileinput.min.js" type="text/javascript"></script>
        <script src="<%=basePath%>js/fileinput_locale_zh.js" type="text/javascript"></script>
        <script src="<%=basePath%>js/bootstrap.min.js" type="text/javascript"></script>
    </head>
    
    <body>
        <div class="container">
            <div class="row" style="height: 500px">
                <input id="file-0" class="file" type="file" multiple data-min-file-count="1" name="file">
            </div>
        </div>
        
        <script type="text/javascript">
            //初始化fileinput控件（第一次初始化）
            function initFileInput(ctrlName, uploadUrl) { var control = $('#' + ctrlName); control.fileinput({ language: 'zh', //設置語言
 uploadUrl: uploadUrl, //上傳的地址
 allowedFileExtensions : ['jpg', 'png','gif'],//接收的文件後綴
 showUpload: true, //是否顯示上傳按鈕
 showCaption: false,//是否顯示標題
 browseClass: "btn btn-primary", //按鈕樣式 
 previewFileIcon: "<i class='glyphicon glyphicon-king'></i>", }); } //初始化fileinput控件（第一次初始化）
 initFileInput("file-0", "/upload"); </script>
    </body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。