bootstrap fileinput上傳文件

時間 2019-11-16

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

原文原文鏈接

參考博客： https://blog.csdn.net/linhaiyun_ytdx/article/details/76215974css

　　　　　 http://www.javashuo.com/article/p-uxoealbr-en.htmlhtml

最近在最接口對接，須要將文件和一些其餘參數發送到其餘系統中去，發送文件用到了bootstrap fileinput。java

1、首先要下載插件包jquery

　　插件下載地址：https://github.com/kartik-v/bootstrap-fileinput/git

2、引入js和css文件　　github

<link rel="stylesheet" href="<%=request.getContextPath()%>/plug-in/bootstrap-fileinput/css/fileinput.min.css">
<script src="<%=request.getContextPath()%>/plug-in/bootstrap-fileinput/js/fileinput.min.js"></script>
<script src="<%=request.getContextPath()%>/plug-in/bootstrap-fileinput/js/locales/zh.js"></script>

3、代碼：ajax

　　一、頁面文件　　bootstrap

<%@ page language="java" import="java.util.*" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@include file="/context/mytags.jsp"%>
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">  
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<link rel="stylesheet" href="<%=request.getContextPath()%>/plug-in/bootstrap-fileinput/css/fileinput.min.css">
<script src="<%=request.getContextPath()%>/plug-in/bootstrap-fileinput/js/fileinput.min.js"></script>
<script src="<%=request.getContextPath()%>/plug-in/bootstrap-fileinput/js/locales/zh.js"></script>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
    <title>bootstrap fileinput上傳</title>
</head>
<body>
<div align="center">
    <div class="container-fluid" style="width: 90%; margin-top: 2%">
        <form class="form-horizontal" id="form" action="" method="post" enctype="multipart/form-data">            
            <div class="form-group">
                <label for="exec_file" class="col-sm-2 control-label">上傳文件<font color="red">*</font>:</label>
                <div class="col-sm-10">
                    <input id="input-id" name="file" multiple type="file" data-show-caption="true" data-show-preview="false">
                </div>
            </div>            
            <div class="form-group">
                <label for="name" class="col-sm-2 control-label">文件名稱<font color="red">*</font>:</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="name" placeholder="請輸入文件名稱">
                </div>
            </div>            
            <div class="form-group">
                <label for="description" class="col-sm-2 control-label">描述:</label>
                <div class="col-sm-10">
                    <textarea rows="3" cols="2" class="form-control" id="description" placeholder="請輸入描述"></textarea>
                </div>
            </div>
        </form>
    </div>
</div>    
<script>    
    $(function() {
        initFileInput("input-id");
    })
    function initFileInput(ctrlName) {
        var control = $('#' + ctrlName);
        control.fileinput({
            language : 'zh', //設置語言   
            uploadUrl : "addScriptJson.do", //上傳的地址  
            allowedFileExtensions : [ 'jpg', 'gif', 'png',  'bat',  'txt' ],//接收的文件後綴  
            maxFilesNum : 5,//上傳最大的文件數量  
            //uploadExtraData:{"id": 1, "fileName":'123.mp3'},  
            uploadAsync : true, //默認異步上傳  
            showUpload : true, //是否顯示上傳按鈕  
            showRemove : true, //顯示移除按鈕  
            showPreview : true, //是否顯示預覽  
            showCaption : false,//是否顯示標題  
            browseClass : "btn btn-primary", //按鈕樣式  
            //dropZoneEnabled: true,//是否顯示拖拽區域  
            //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 otherData = getdata();
                return otherData;
            }
        }).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) { //一個文件上傳成功  
            console.log('文件上傳成功！' + data.id);
        }).on('fileerror', function(event, data, msg) { //一個文件上傳失敗  
            console.log('文件上傳失敗！' + data.id);
        })
    }
    function getdata(){
        var name = $("#name").val() ;
        var description = $("#description").val() ;        
        var scriptJson = {
            "name": name,
            "description": description
        }
        return scriptJson;
    } 
</script>  
</body>

　　二、後臺代碼app

@Description("新增腳本信息")
@RequestMapping(value = "addScriptJson", method = RequestMethod.POST)
@ResponseBody
public String addScriptJson(@RequestParam MultipartFile file, HttpServletRequest request, HttpServletResponse response) {
        String name = request.getParameter("name");
        String description = request.getParameter("description");
        System.out.println(name);
        System.out.println(description);        
        String filePath = "";// jar包的路徑  
        if (!file.isEmpty()) {  
            File temp = new File("");  
            filePath = temp.getAbsolutePath() + "\\" + file.getOriginalFilename();   
            BufferedOutputStream out;  
            try {  
                out = new BufferedOutputStream(new FileOutputStream(new File(filePath)));   
                out.write(file.getBytes());  
                out.flush();  
                out.close();  
            } catch (FileNotFoundException e) {  
                e.printStackTrace();  
            } catch (IOException ex) {  
                ex.printStackTrace();  
            }   
        }        
        AjaxJson ajaxJson = new AjaxJson();
        try {
　　　　　　　　// 這裏處理業務邏輯
        } catch (Exception e) {
            ajaxJson.setSuccess(false);
            ajaxJson.setMsg(e.getMessage());
            e.printStackTrace();
        }
        return ajaxJson.getJsonStr();
    }