FormData异步提交表单

2016-12-05 20:09:11来源:CSDN作者:qq_35336319人点击

第七城市

通过使用FormData实现带file的表单异步提交

jQuery.ajax异步提交表单一般的方法是将form表单序列化$(“#form”).serialize(),然后通过ajax请求就可以了,但是这种方式是将form表单里的数据转换成json字符串格式当成参数传到后台,正常都是可以实现,只是如果在表单中存在file,这种方法就行不通,故需要用FormData来实现,以下是FormData的具体使用代码:

代码

var form = new FormData(document.getElementById("form"));$.ajax({    url:url,    type:"post",    data:form,    processData:false,  // 告诉jQuery不要去处理发送的数据    contentType:false,  // 不设置Content-Type请求头,这个最好在表单属性设置enctype="multipart/form-data"    success:function(data) {        ...    }});

可在提交表单的时候添加一个loading页面,提升用户体验,我这里是实用的layer.js插件,个人觉得比较好用,附上链接http://layer.layui.com/

后台处理代码:

@ResponseBody@RequestMapping(value = "/register2", method = RequestMethod.POST)public void register(@RequestParam(value = "file", required = false) MultipartFile file, HttpServletRequest request, HttpServletResponse response, Companyinfo company) {    String result = "success";    String imagePath = "F://images";    OutputStream out = null;    InputStream in = null;    PrintWriter pw = null;    try {        pw = response.getWriter();        in = file.getInputStream();        String fileName = file.getOriginalFilename();        String ext = fileName.substring(fileName.lastIndexOf(".") + 1, fileName.length());        String saveName = UUID.randomUUID() + "." + ext;        if (file.isEmpty()) {            throw new Exception("上传文件为null");        }        File targetFile = new File(imagePath, saveName);        out = new FileOutputStream(targetFile);        long length = file.getSize();        byte[] data = new byte[(int)length];        in.read(data);        if (!targetFile.exists()) {            targetFile.createNewFile();        }        out.write(data);        company.setLicense(saveName);        Date createTime = new Date();        company.setCreateTime(createTime);        Integer res = companyService.saveComany(company);        if (res != 1) {            logger.error("用户申请失败");            result = "fail";            pw.write(result);            return;        }        pw.write(result);    } catch (Exception e) {        e.printStackTrace();        result = "fail";        pw.write(result);        return;    } finally {        try {            pw.flush();            pw.close();            out.flush();            in.close();            out.close();        } catch (Exception e) {            e.printStackTrace();        }    }}

代码有什么不足或可以优化的请不吝赐教

第七城市

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台