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

前端页面:

	<form id="postUrlForm"method="post" action='<c:url value="/license/create"/>' class="pageForm required-validate" onsubmit="" enctype="multipart/form-data">
	    <div id="add" class="modal-dialog">
	        <div class="modal-content">
	            <div class="modal-header">
	                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
	                <h4 class="modal-title" id="myModalLabel">请输入license信息,录制直播及标准终端不需要的,填写数字0</h4>
	            </div>
	            <div style="padding: 10px 100px 1px;">
		            <div class="input-group">
			            <span class="input-group-addon">项目名称:</span>
			            <input id="projectName" type="text" class="form-control" >
			        </div>
			        <br>
			         <div class="input-group">
			            <span class="input-group-addon">创建者:</span>
			            <input id="author" type="text" class="form-control" >
			        </div>
			        <br>
			        <div class="input-group">
			            <span class="input-group-addon">备注:</span>
			            <input id="description" type="text" class="form-control" >
			        </div>
			        <br>
			        <!--上传文件  -->
			        <div class="input-group">
			            <span class="input-group-addon">文件上传:</span>
			            <input id="file" type="file" name="file" class="btn btn-default">
				    </div>
			        <br>
			        
			  </div><!-- style input group-->
	            
	            <div class="modal-footer">
	                <button type="button" class="btn btn-default"  data-dismiss="modal" onclick="save()">保存信息</button>
	                <!--  <button type="button" class="btn btn-default" data-dismiss="modal" onclick="window.close()">关闭</button>-->
	            </div>
	            <span class="input-group-addon"></span>
	        </div><!-- /.modal-content -->
	    </div><!-- /.modal -->
	</form>
                   

注意几点:

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

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值