form表单 submit方式提交文件 带ajaxForm方式回调

时间：2024-02-25 13:16:40

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文件!");
}