Bootstrap file-input 是一個檔案上傳的外掛 ,使用之後會使檔案上傳變得特別簡單.
方法:

1.新增css和js支援

fileinput.min.css和fileinput.min.js是必須的,其他根據情況新增
除了外掛需要的js和css,還需jquery和bootstrap相關的css和js

<input id="file"name="file" type="file" class="file-loading"  accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
 
>

/*載入上傳控制元件*/
    Initfileinput = function (uploadurl){
        $("#file").fileinput({
            //uploadUrl: "../fileinfo/save", // server upload action
            uploadUrl:uploadurl,
            required: true,
            showBrowse: true, 
            browseOnZoneClick: true,
            dropZoneEnabled: false
 
,
            allowedFileExtensions: ["xls", "xlsx"],//只能選擇xls,和xlsx格式的檔案提交
            //maxFileSize: 0,//單位為kb，如果為0表示不限制檔案大小
            /*不同檔案圖示配置*/
            previewFileIconSettings: { 
                 'docx': '<i class="fa fa-file-word-o text-primary" ></i>',
                 'xlsx': '<i class="fa fa-file-excel-o text-success"></i>'
 
,
                 'pptx': '<i class="fa fa-file-powerpoint-o text-danger"></i>',
                 'jpg': '<i class="fa fa-file-photo-o text-warning"></i>',
                 'pdf': '<i class="fa fa-file-pdf-o text-danger"></i>',
                 'zip': '<i class="fa fa-file-archive-o text-muted"></i>',
                 'doc': '<i class="fa fa-file-word-o text-primary"></i>',
                 'xls': '<i class="fa fa-file-excel-o text-success"></i>',
                 'ppt': '<i class="fa fa-file-powerpoint-o text-danger"></i>',
                 'pdf': '<i class="fa fa-file-pdf-o text-danger"></i>',
                 'zip': '<i class="fa fa-file-archive-o text-muted"></i>',
                 'htm': '<i class="fa fa-file-code-o text-info"></i>',
                 'txt': '<i class="fa fa-file-text-o text-info"></i>',
                 'mov': '<i class="fa fa-file-movie-o text-warning"></i>',
                 'mp3': '<i class="fa fa-file-audio-o text-warning"></i>',
                 'jpg': '<i class="fa fa-file-photo-o text-danger"></i>', 
                 'gif': '<i class="fa fa-file-photo-o text-muted"></i>', 
                 'png': '<i class="fa fa-file-photo-o text-primary"></i>'    
            },
            layoutTemplates:{ actionUpload:''},
            /*上傳成功之後執行*/
            fileuploaded:$("#file").on("fileuploaded", function (event, data, previewId, index) {                         
                console.log("Upload success");
            }),

            /*上傳出錯誤處理*/
            fileerror:$('#file').on('fileerror', function(event, data, msg) {
                console.log("Upload failed")
            }),
        });
    }

在初始化的時候 傳入引數(你要訪問的url)載入

Initfileinput ()

外掛 預設ajax非同步請求,可以通過配置 uploadAsync:false 改為同步.

後臺處理 (MultipartFile處理檔案上傳)

@RequestMapping("/uploadfile")
    @ResponseBody
    public PageT<FileInfo> uploadFile(@RequestParam("file") MultipartFile file,HttpServletRequest request) throws Exception{
        PageT<FileInfo>  tpage = new PageT<FileInfo>();
        String path = request.getSession().getServletContext().getRealPath("upload/fileinfo");
        String fileName = new Date().getTime()+"-"+file.getOriginalFilename();
        File targetFile = new File(path, fileName);
        //資料夾不存在,則新建
        boolean result=saveFileContent(file, targetFile);
        if(result){
            FileInfo fileinfo = new FileInfo();
            fileinfo.setFilename(fileName);
            tpage.setData(fileinfo);
        }
        return tpage;
    }

    /**
     * 儲存excel到指定位置
     * @param file
     * @param targetFile
     * @return
     * @throws Exception
     */
    private boolean saveFileContent(MultipartFile file, File targetFile) throws Exception {
        if (file==null || targetFile==null) {
            return false;
        }
        if (!targetFile.exists()) {
            targetFile.mkdirs();
        }
        // 儲存
        try {
            file.transferTo(targetFile);
        } catch (Exception e) {
            e.printStackTrace();
            throw e;
        }
        return true;
    }

這時候返回json資料, js要接收要通過

data.response