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

来源:互联网 发布:展板设计用什么软件 编辑:程序博客网 时间:2024/06/04 17:47

页面提交内容为两个业务逻辑,分两个程序处理,干脆就弄了两次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);                   }    }