File的异步提交完整过程

本文分为两个部分，第一部分是ajax的异步Flie提交，第二步分是在这个过程中的一些小问题input按钮的调整

第一部分：Ajax的异步提交File文件

<input  type="file" size="20" id="fileUpload1" name="file" onchange ="uploadFile()" value="导入人员数据">

我将这个文件的提交修改为了直接点击选择双击文件直接提交，不需要在submit

function uploadFile() {
        var fd = new FormData();
        var file_obj = document.getElementById('fileUpload1').files[0];
        fd.append('file', file_obj);
        $.ajax({
            url: '${ctx}/mec/mecUserinfo/save/mecUserinfoExcel',//写你的URL
            type: 'POST',
            data: fd,
            //文件上传时必须配置的参数
            contentType: false,
            processData: false,
            dataType: "json",//返回的数据格式
            success : function(data) // 服务器成功响应处理函数
            {
                //在这里做你的返回处理
                var obj = document.getElementById('fileUpload1') ;
                obj.outerHTML=obj.outerHTML;
                alert(data.message);
            },
            error : function(data)// 服务器响应失败处理函数
            {
                var obj = document.getElementById('fileUpload1') ;
                obj.outerHTML=obj.outerHTML;
                console.log("服务器异常");*/
            }
        });
       return false;
    }

下面这两行是去除File点击选中文件面后，显示的文件名字用的：

var obj = document.getElementById('fileUpload1') ;
                obj.outerHTML=obj.outerHTML;

此外，还有另外一种方法可以清空里面的信息，但是我更倾向于第一种

var obj = document.getElementById('fileupload1') ; 
obj.select(); 
document.selection.clear(); 

后台接收,下面这段代码无关紧要，你只要知道如何获取FILE就可以了，即前后台参数的对接：

@RequiresPermissions("mec:mecUserinfo:edit")
    @PostMapping(value = "/save/mecUserinfoExcel")
    @ResponseBody
    public String saveMecUserinfoUploadExcels(MultipartFile file, HttpServletRequest request) throws IOException {
        //获取文件的名字
        String retutnType = "保存**体检人员基本信息表失败！";
        try {
            HttpSession session = request.getSession();
            String userName = (String) session.getAttribute("userName");
            if (file == null) {
                return renderResult(Global.FALSE, text("请上传Excel模板！"));
            } else {
                String originalFilename = file.getOriginalFilename();
                Workbook workbook = null;
                if (originalFilename.endsWith(EXCEL_XLS)) {
                    workbook = new HSSFWorkbook(file.getInputStream());
                    retutnType = mecUserinfoService.saveMecUserinfoExcels(workbook, userName);
                    if (retutnType.equals("1")) {
                        return renderResult(Global.TRUE, text("保存**体检人员基本信息表成功！"));
                    } else {
                        return renderResult(Global.FALSE, text(retutnType));
                    }
                } else if (originalFilename.endsWith(EXCEL_XLSX)) {
                    workbook = new XSSFWorkbook(file.getInputStream());
                    retutnType = mecUserinfoService.saveMecUserinfoExcels(workbook, userName);
                    if (retutnType.equals("1")) {
                        return renderResult(Global.TRUE, text("保存**体检人员基本信息表成功！"));
                    } else {
                        return renderResult(Global.FALSE, text(retutnType));
                    }
                }
            }
        } catch (Exception e) {
            e.printStackTrace();
            return renderResult(Global.FALSE, text("文件格式错误!必须是.xls或者xlsx类型文件"));
        }

        return renderResult(Global.TRUE, text("保存**体检人员基本信息表成功！"));


    }

二.input的的类型为file时，我们经常要修改它的样式，这时有一种快速高效的方法触发我们的事件

1、增加用于设置按钮样式的元素

2、对input设置透明度为透明，并设为绝对定位且宽高等于新增按钮元素的宽高，可使点击区域覆盖按钮的区域，也使其浮于新增按钮元素的上方，在视觉上等同于点击我们设置的按钮。