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

今天,在做项目的过程中,需要实现网页端上传文件到后台服务器,且要将文件数据进行解析,再将数据返回到前端页面进行显示的功能。上传文件是用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.数据显示成功!


版权声明:本文为weixin_42230550原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。