Html5新特性-formData异步表单提交

时间:2022-11-17 16:30:49

页面提交内容为两个业务逻辑,分两个程序处理,干脆就弄了两次ajax访问。其中一个ajax内有文件上传,所以便用到了html5的formData。

页面部分只用写input标签即可,类似:

 <input id="isSconds" type="file" />

js部分创建formData对象,然后把input内容选中,加进去就行了。

 
var formData = new FormData();
var ipName= $("#isSconds").files[0];
//append三参数:1参数名(如为多文件上传,则不能重复),2文件体(用js获取),3文件名(若不写此项则为本来的文件名)
formData.append("file1",fileNow[m],"我是自定义的文件名");

 

 

ajax部分

			//ajax部分
			if(formData!=null){	
			    $.ajax({
			    url:"接收地址", 
			    type : 'POST', 
			    data : formData, 
			    // 告诉jQuery不要去处理发送的数据
			    processData : false, 
			    // 告诉jQuery不要去设置Content-Type请求头
			    contentType : false,
			    crossDomain: true,  
			    beforeSend:function(){
			    console.log("上传中……");
			    },
			    success : function(data) { 
			    if(data==1){
			    alert("上传成功");
			    $("input").val("");
			    $("input[type='button']").attr("value","提  交");
			    }else{
			    alert("上传失败,返回信息:"+data);
			    }
			    }, 
			    error : function(responseStr) { 
			    console.log("error");
			    } 
			    });
		    }	
			    	

后端接收,java后端SpringMVC,单文件多文件都可以处理。

 @RequestMapping("/对应js中的请求接口")
    public void springUpload(HttpServletRequest request, HttpServletResponse response)
    {   
        logger.info("文件接收!");
        String isOk = "0";
        String ip=null;
        try
        {
            // 将当前上下文初始化给 CommonsMutipartResolver (多部分解析器)
            CommonsMultipartResolver multipartResolver = new CommonsMultipartResolver(request.getSession()
                    .getServletContext());
            // 检查form中是否有enctype="multipart/form-data"
            if (multipartResolver.isMultipart(request))
            {
                // 将request变成多部分request
                MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest) request;
                // 获取multiRequest 中所有的文件名
                @SuppressWarnings("rawtypes")
                Iterator iter = multiRequest.getFileNames();
                // 如果目标路径文件夹不存在,则创建文件夹
                boolean flag=true;
                while (iter.hasNext())
                {
                    String fileName=null;
                    try
                    {
                        // 一次遍历所有文件
                        MultipartFile file = multiRequest.getFile(iter.next().toString());
                        if (file != null)
                        {
                            fileName=file.getOriginalFilename();
                            String path = FILEDIRECTORY(根目录) + "文件夹/" + fileName;
                            System.out.println(path);
                            File fileDir = new File(path);
                            File fileParent = fileDir.getParentFile();
                            // 如果文件夹不存在,则创建
                            if (!fileParent.exists())
                            {
                                fileParent.mkdirs();
                            }
                            fileDir.createNewFile();
                            // 上传
                            file.transferTo(fileDir);
                        }
                        isOk = "1";
                     } catch (Exception e)
                    {
                        flag=false;
                        sb.append("_"+fileName);
                        e.printStackTrace();
                    }
                }
            }
        } catch (Exception e)
        {
            e.printStackTrace();
            logger.error(e);
        }finally{
            // 上传成功发送“1”,上传失败发送“0”
            response.getWriter().write(isOk);           
        }
    }