业务场景需求：

现在应用系统前后端技术分离以及用户对于体验感追求越来越高，在交互体验上既要实现系统体验感好，也要符合用户的体验感受。

假如用户填写资料时，需要上传文件/图片，上传成功后，页面进行跳转，再回到资料填写页面，上传信息回写，这样一方面是体验感不好，另一方面增加了服务器的负荷，无论哪一方面都不尽人意，所以解决的方法是，用户提交资料上传，上传成功后返回文件地址，当前页面不刷新。

要做到以上体验，可通过以下实际实例来实现，但是不能全盘照抄，因为不同的产品经理以及客户要求的交互方式不一样，所以会有点差别。

前端

代码逻辑

我的交互体验是，在数据列表页以layer弹窗的方式，在弹窗中选择文件，再点layer的确定方法提交上传，代码如下：

function deployFun(id) {
        	parent.layer.open({
    			type: 2,
    			area: ['400px', '180px'],
    			fixed: false, //不固定
    			maxmin: true,
    			title:"编辑",
    			btn: ['确定',"取消"],
    			content: '${path }/url/redirect?url=/flow/processDeploy',
    			yes: function(index, layero){
    				var formdata = parent.layer.getChildFrame('form', index);
    				uploadFiles(formdata,"${path }/wfProcess/deploy");
    				parent.layer.close(index); //如果设定了yes回调，需进行手工关闭
    			}
    		});
    }
  
    function uploadFiles(form,url){
    	var data = new FormData(form[0]);
        $.ajax({
            type: "POST",
            url: url,
            data: data,
            async: false,  
            cache: false,  
            contentType: false,  
            processData: false,
            success: function (data) {
            	parent.layer.msg("部署成功",{icon: 1});
            	firstDataGrid.datagrid('reload');
            },
            error: function(data) {
                alert("error:"+data.msg);
             }
        });
    }

大家注意到uploadFiles 方法中，有个FormDate 对象，它可以把form中所有表单元素的name与value组成一个queryString，提交到后台。在使用Ajax提交时，使用FormData对象可以减少拼接queryString的工作量。
官方解释：

通过FormData对象可以组装一组用 XMLHttpRequest发送请求的键/值对。
它可以更灵活方便的发送表单数据，因为可以独立于表单使用。
如果你把表单的编码类型设置为multipart/form-data ，则通过FormData传输的数据格式和表单通过submit() 方法传输的数据格式相同

后端代码

springmvc的Controller

后端就是个接收参数的方法：

@RequestMapping(value = "deploy", method = RequestMethod.POST)
@ResponseBody
public Result processDeploy(MultipartFile snakerFile, String id) {
	InputStream input = null;
	Result result = new Result();
	try {
		input = snakerFile.getInputStream();
		if (StringUtils.isNotEmpty(id)) {
			engine.process().redeploy(id, input);
		} else {
			engine.process().deploy(input);
		}
	} catch (Exception e) {
		e.printStackTrace();
		result.setSuccess(false);
		result.setMsg("部署失败");
	} finally {
		if (input != null) {
			try {
				input.close();
			} catch (IOException e) {
				e.printStackTrace();
			}
		}
	}
	result.setSuccess(true);
	result.setMsg("部署成功");
	return result;
}

通过以上前后端代码就可以实现文件上传功能了，但是再一次强调，不能全盘照抄，应理解实现原理，对照自己系统实际交互方式和逻辑，再进行融合。

附上FormData对象使用文档：
FormData 对象的使用

支持

若我的文章对你有帮助，扫描下面小程序赞赏码支持一下吧

微信小程序赞赏码