首页 > 技术文章 > Java如何解决form表单上传文件,以及页面返回处理结果通知!

onlymate 2017-03-22 11:02 原文

前端JSP代码

<form id='formSumbit' class='form-horizontal' action='/ncpay/route/chlsubmcht/batchImpor' method='post'  enctype='multipart/form-data'>
    <input type='file' name='file'>
    <input type='submit' value='上传文件'/>
</form>

JS代码

$(function(){
    $('#formSumbit').submit(function (event) {
        //首先验证文件格式
        var fileName = $(this).find("input[name=file]").val();
        if (fileName === '') {
            alert('请选择文件');
            return;
        }
        var fileType = (fileName.substring(fileName.lastIndexOf(".") + 1, fileName.length)).toLowerCase();
        if (fileType !== 'xls' && fileType !== 'xlsx') {
            alert('文件格式不正确,excel文件!');
            return;
        }
        event.preventDefault();
        var form = $(this);
        if (form.hasClass('upload')) {
            //普通表单
            $.ajax({
                type: form.attr('method'),
                url: form.attr('action'),
                data: form.serialize(),
                dataType: "JSON"
            }).success(function () {
                //成功提交
            }).fail(function (jqXHR, textStatus, errorThrown) {
                //错误信息
            });
        }
        else {
            // mulitipart form,如文件上传类
            var formData = new FormData(this);
            $.ajax({
                type: form.attr('method'),
                url: form.attr('action'),
                data: formData,
                dataType: "JSON",
                mimeType: "multipart/form-data",
                contentType: false,
                cache: false,
                processData: false,
                error : function(XHR, textStatus, errorThrown) {
                    alert("网络错误!XHR=" + XHR + "\ntextStatus=" + textStatus
                            + "\nerrorThrown=" + errorThrown);
                },
                success : function(data) {
                    alert(data[0].message);
                }
            });
         }
     });
});

以上做完,就能够正常的请求后台了,但是又出现一个新的问题,前端页面总是执行error,可是请求是成功的。然后继续修改。

 在Controller类中设置response.setContentType("text/html; charset=utf-8"); 这里需要注意$.ajax块中dataType: "JSON",这里必须将reponse 的contenType响应头信息设置成

"text/html; charset=utf-8" 否则在页面总是会弹出 “出错”。

@RequestMapping(value="/batchImpor",method=RequestMethod.POST)
    public @ResponseBody String v_batch_impor(@RequestParam("file") MultipartFile file, HttpServletRequest request, HttpServletResponse response){
        response.setContentType("text/html; charset=utf-8");
        ReturnJson json = new ReturnJson();
        try {
            ImportExcel ei = new ImportExcel(file, 0, 0);
            List<bz_chl_sub_mcht> list = ei.getDataList(bz_chl_sub_mcht.class);
            for (bz_chl_sub_mcht sub_mcht : list) {
                recordModify(sub_mcht, ModifyType.ADD);
            }
            //service_chlsubmcht.saveAll(list);
            json.setStatus("0");
            json.setMessage("数据导入成功!");
        } catch (Exception e) {
            json.setStatus("1");
            json.setMessage("数据导入失败,请检查数据是否正确或部分数据是否唯一!");
            e.printStackTrace();
        }
        return JSONArray.fromObject(json).toString();
    }

结果测试:

 

 

推荐阅读