zoukankan      html  css  js  c++  java
  • 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文件!");
    }


  • 相关阅读:
    2月4日学习日志
    2月3日学习日志
    2月2日学习日志
    2月1日学习日志
    Result Maps collection already contains value for ***
    mapreduce入门程序之---wordcount
    利用Git上传项目到github以及遇到的问题
    看100篇架构设计的文章,不如重构一次代码
    面试中的微服务架构
    分布式架构中数据一致性常见的几个问题
  • 原文地址:https://www.cnblogs.com/1234cjq/p/8257651.html
Copyright © 2011-2022 走看看