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


  • 相关阅读:
    Hive数据倾斜原因和解决办法(Data Skew)
    Hive简介
    SQL---公共表表达式(CTEs)
    SQL面试题---topN问题
    SQL---分页查询
    SQL---自连接(self join)
    SQL---关联子查询(correlated subquery)
    SQL---CASE表达式
    SQL查询语句执行顺序
    SQL---窗口函数(window function)
  • 原文地址:https://www.cnblogs.com/1234cjq/p/8257651.html
Copyright © 2011-2022 走看看