如何实现Form表单实现文件上传后，将文件中的数据通过回调函数返回到前端页面中。

最新推荐文章于 2024-08-20 15:07:31 发布

Gavid-jh

最新推荐文章于 2024-08-20 15:07:31 发布

阅读量5.7k

点赞数

分类专栏： JavaWeb 文章标签： form表单实现回调函数

本文链接：https://blog.csdn.net/weixin_42230550/article/details/84037360

版权

JavaWeb 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

今天，在做项目的过程中，需要实现网页端上传文件到后台服务器，且要将文件数据进行解析，再将数据返回到前端页面进行显示的功能。上传文件是用Form表单提交数据的方法向后台传输文件流，在此遇到了一个问题：后台在解析完文件后，数据又不想当时就存储在数据库中，而是要在前端页面校验成功后，再进行存储。但是，用普通Form表单提交的话，没有办法实现回调函数。后来通过查找资料，发现可以用jQuery.form.js中的ajaxSubmit()方法来实现Form的函数回调功能。具体实现如下：
1.导入依赖的js文件
Note: jquery.form.js可以直接去官网 (http://jquery.malsup.com/form/)下载

     <script type="text/javascript" src="../JavaScript/jquery.min.js"></script>
     <script type="text/javascript" src="../JavaScript/jquery.form.js"></script>

2.创建form表单

		<form id="questionTypesManage"  method="post" enctype="multipart/form-data">
            选择文件：　<input id="uploadExcel" name="uploadExcel" class="easyui-filebox" style="width:200px" data-options="prompt:'请选择文件...'">
            <br/>
            <br/>
            <a href="#" class="easyui-linkbutton" style="width:122px" onclick="uploadExcel()" >上传文件</a>
        </form>

3.上传文件事件

//上传excel文件
function uploadExcel(){
            //对文件格式进行校验
            var d1=/\.[^\.]+$/.exec(fileName);
            if(d1==".xls" || d1==".xlsx"){
                //提交表单
                var options = {
                    url: getRealPath()+"/AssetDetailInit/batchimport",
                    type: 'POST',
                    success:showResponse,
                    error : function(xhr, status, err) {
                        alert("操作失败");
                    }
                };
                //这里可能和官方的不太一样，但是本人用官方Demo代码,始终无法提交
                $("#questionTypesManage").ajaxSubmit(options);
            } else{
                $.messager.alert('提示','请选择xls或xlsx格式文件！','info');
                $('#uploadExcel').filebox('setValue','');
            }
        }

}

//文件上传后的回调函数
//responseText：服务器返回的数据（json字符串）
function showResponse(responseText, statusText, xhr, $form) {
    ShowExcelDataInit();//数据框的初始化
    $('#dlg_excelImport').dialog('close');
    $('#dlg_assetExcelAddShow').dialog('open').dialog('setTitle', 'xxxx');
    $('#excel_grid').datagrid('loadData',responseText);//数据框加载数据
}

4.采用SpringMVC所写的后台代码

    @RequestMapping("/batchimport")
    /**
     * @Description  ：重写excel批量导入
     * @author       : bjh
     * @param        : [request, response]
     * @return       : 
     * @exception    :
     * @date         : 2018/11/13 16:02
     */
    public @ResponseBody List<Assetdetail> batchimport(@RequestParam("uploadExcel") MultipartFile filePath,
                                                      HttpServletRequest request,HttpServletResponse response) throws Exception{
        return assetDetailInitService.batchimport(filePath);
    }

5.数据显示成功！