form表單 submit方式提交文件 帶ajaxForm方式回調

1.引入基礎文件   省略bootstrape 3.x 以及最新的jquery

css文件

<!-- fileinput -->
<link rel="stylesheet" href="/bower_components/bootstrap-fileinput/css/fileinput.min.css"/>

js文件   包含ajaxForm需要的js   包括fileinput漢化

<!-- fileinput -->
<script src="/bower_components/bootstrap-fileinput/js/fileinput.min.js"></script>
<script src="/bower_components/bootstrap-fileinput/js/jquery.form.js"></script>
<script src="/bower_components/bootstrap-fileinput/js/locales/zh.js"></script>

2.form表單

注：上傳文件的表單需加上enctype="multipart/form-data"，  input里的name屬性供后台接收參數使用，accept選擇顯示文件時的后綴名

坑：插件漢化不成功，需在input中去掉class="file"的屬性，未知原因

<form id="importFile" action="/excel/uploadFile" class="form-horizontal" method ="POST" enctype="multipart/form-data">
    <div class="box-body">
        <div>
            <label class="control-label">請選擇要導入的Excel文件：</label>
            <input id="excelFile" type="file"  name="fileUpload"    data-preview-file-type="text" accept=".xls,.xlsx"/>
        </div>
    </div>
</form>

3.js文件

submit方式為表單自動提交  插件中出現的上傳就是submit方式   也可修改為ajax異步方式

下面附錄漢化方式和不顯示預覽的設置

$(function() {
    $("#excelFile").fileinput({
        language : 'zh',
        showPreview:false
    });
});

//ajaxForm 方式用來接收submit方式提交的form，data為后台返回值
/** 驗證文件是否導入成功  */
$("#importFile").ajaxForm(function(data){
    if(data.rspCode=="000000"){
        layer.msg(data.rspMsg);
        setTimeout("location.reload();",3000);

    }else {
        layer.msg(data.rspMsg);
    }
});

4.后台實例

/**
 * 上傳文件
 * @throws Exception
 */
@RequestMapping(value = "uploadFile", method = RequestMethod.POST)
@ResponseBody
public Response uploadFile(
        @RequestParam(value="fileUpload")MultipartFile fileUpload,    //此時是input中name的作用
        HttpSession httpSession
) {
    //獲取當前用戶
    User user=(User) httpSession.getAttribute("user");
    if(fileUpload!=null){
        try {
            InputStream inputStream = fileUpload.getInputStream();
            readSMSService.genSMSByXls(inputStream,user);//若果不用存本地，則直接發短信。
        } catch (Exception e) {
            e.printStackTrace();
            return new Response("999999","文件內容格式不正確,上傳失敗,!");
        }
        return new Response("000000","上傳成功,正在跳轉...!");
    }
    return new Response("000000","請添加excel文件!");
}