使用formData实现文件与信息同时ajax上传。

前端页面:

	

注意几点:

1、form的属性enctype="multipart/form-data"。

2、文件记得添加。

前端js脚本

function save(){
	var myform = new FormData();
	myform.append('file', $("#file")[0].files[0]);
	myform.append('projectName', $("#projectName").val());
	myform.append('author', $("#author").val());
	myform.append('description', $("#description").val());

    $.ajax({
    		url:"license/create",
		    type:"POST",
		    data:myform,
 		    async: false,
            contentType: false,
            processData: false, //用于对data参数进行序列化处理 这里必须false
    }).done(function(data){ 
    	alert(data.info);
    	if(data.info=="添加成功"){
        	$("#projectName").val("");
        	$("#author").val("");
        	$("#description").val("");
        	location.reload();
    	}

    }
    );
}

注意:

1、注意添加的格式

    var myform = new FormData();
    myform.append('file', $("#file")[0].files[0]);

2、必须使用这样的属性

            data:myform,
            async: false,
            contentType: false,
            processData: false, 

后端java程序

@RequestMapping(value = "/license/create",method = RequestMethod.POST)
	@ResponseBody
	public JSONObject createLicense(HttpSession session,HttpServletRequest request,Model model,@RequestParam("file") MultipartFile file) throws Exception{
		
		System.out.println(file.getName());
		if(!file.isEmpty()) {
	           //上传文件路径
	           String path = ("E:\\");
	           //上传文件名
	           String filename = file.getOriginalFilename();
	           File filepath = new File(path,filename);
	           //判断路径是否存在,如果不存在就创建一个
	           if (!filepath.getParentFile().exists()) { 
	               filepath.getParentFile().mkdirs();
	           }
	           //将上传文件保存到一个目标文件当中
	           file.transferTo(new File(path + File.separator + filename));
		}
		System.err.println("get request");
		String projectName = request.getParameter("projectName");
		String author = request.getParameter("author");
}

注意:

1、文件读取@RequestParam("file") MultipartFile file

2、属性可以通过request获取,也可以直接用文件获取方式获取@RequestParam("author") String author

3、文件上传通过springMVC完成,具体完成方式参考之前的文章https://blog.csdn.net/u010365717/article/details/89712427

你可能感兴趣的:(笔记)