利用FormData异步提交content-type为jpg,等流方面信息 --2016.04.20

原创 2016年10月18日 19:03:01

利用FormData异步提交content-type为jpg,等流方面信息 –2016.04.20


平常在提交一个包含上传文件流信息都是使用form表单提交,最近在业务上需要异步提交图片,以前都是用一些js上传组键,这次没有用组键,最后找到了用FormData对像来提交信息。FormData的本质是将提交的东西伪装成了form表单,但是,是异步的

<div><input type="file" id="file_attachment"  name="file"/></div>
    $("#file_attachment").change(function(){
    var filedata = new FormData();
    var file = $("#file_attachment")[0].files[0];
    var nodeId = $("#node_page_nodeId_hidden").val();
    var ipa = {"categoryId":"SRVAPPR-00000009","productId":"","productName":"111111","engTuCode":"20160414103329737130","engTrCode":"2016041910454650560","engExecutorUc":"20160419104546663838","durationDay":"1","baseProduct":null};

        var url = "service_process_node_uploadAttachment.htm";
        if(nodeId){
            filedata.append("file",file);
            filedata.append("nodeId",nodeId);
            filedata.append("ipa",ipa);
            $.ajax({
                  url: url,
                  data: filedata,
                  processData: false,
                  contentType: false,
                  type: 'POST',
                  success: function(data){
                      var datajson = $.parseJSON(data);

                  }
                });
        }

    });

使用的方法

var filedata = new FormData(); 创建一个FormData()对象,然后用将需要的提交的内容用filedata.append()用键值对的模式添加到filedata里,在服务端接收就根据键来获取,值得注意的是,var file = $(“#file_attachment”)[0].files[0];
这里的files[0]只是单文件,当配置成 multiple,如

<input type="file" id="file_attachment" multiple tname="file"/>

获取这个多文件流就可以用var file = $(“#file_attachment”)[0],我当时获取这个file的时候花了不少时间,当时在网上看了半天,发现很多文章都是重复的介绍formData这个概念,demo也没有,有demo的也没有提怎么获取这个file对象,这个小坑得记下来;

看下发起这个ajax的时候htpp协议的头文件

Content-Disposition:attachment;filename=f.txt
Content-Type:text/html;charset=UTF-8
FM_CLIENT_ID:2016040811120556790
FM_SESSION_ID:aypvlhy3bbho1l6koku6vn8b
Server:Jetty(8.1.16.v20140903)
Transfer-Encoding:chunked
Request Headers
         Accept:*/*
        Accept-Encoding:gzip, deflate
        Accept-Language:zh-CN,zh;q=0.8,zh-TW;q=0.6
        Connection:keep-alive
        Content-Length:55623
        Content-Type:multipart/form-data;                         boundary=----WebKitFormBoundaryDu1rFGOOBCnSkQzj
        Cookie:JSESSIONID=aypvlhy3bbho1l6koku6vn8b
        Host:localhost:8080
        Origin:http://localhost:8080
        Referer:http://localhost:8080/farmen/partnerHome.htm
        User-Agent:Mozilla/5.0 (Windows NT 10.0; WOW64)         AppleWebKit/537.36 (KHTML, like Gecko) Chrome/49.0.2623.87 Safari/537.36
        X-Requested-With:XMLHttpRequest
Query String Parameters
 (3)
Request Payload
------WebKitFormBoundaryDu1rFGOOBCnSkQzj
Content-Disposition: form-data; name="file"; filename="1.jpg"
Content-Type: image/jpeg


------WebKitFormBoundaryDu1rFGOOBCnSkQzj
Content-Disposition: form-data; name="nodeId"

0
------WebKitFormBoundaryZkq6BcqYyFLRBEk6
Content-Disposition: form-data; name="ipa"

{"categoryId":"SRVAPPR-00000009","productId":"","productName":"111111","engTuCode":"20160414103329737130 ","engTrCode":"2016041910454650560","engExecutorUc":"20160419104546663838","durationDay":"1","baseProduct":null}

------WebKitFormBoundaryDu1rFGOOBCnSkQzj--
Name
service_process_node_uploadAttachment.htm?&FM_CLIENT_ID=2016040811120556790&currentUserCode=20160415091813108347
1 requests ❘ 1.6KB transferred

看 Request Payload 可以看到其实还是form的提交,我理解是FormData将这个提交伪装成form表单提交
服务端是用java的SpringMvc框架写的,后台接受方法为

@RequestMapping("/service_process_node_uploadAttachment")
    @ResponseBody
public ResponseData<TmpTemplateForNodeVO> uploadAttachment(HttpServletRequest request,
            String nodeId,String ipa) {
            System.out.println(nodeId);
            System.out.println(ipa);
        List<DocumentBean> docBeanList = new ArrayList<DocumentBean>();
        try {
            docBeanList = handleFile(request);

        if (docBeanList.size() < 1) {
            result.setMessage("文件上传异常,请稍后再试");
            result.setSuccess(false);
            return result;
        }
        TmpTemplateForNodeVO vo = assemblyFileAndNode(docBeanList.get(0), actionId,nodeId);
        result.setSuccess(true);
        result.setEntity(vo);

        } catch (Exception e) {
            e.printStackTrace();
        }
        return result;
    }
    public List<DocumentBean> handleFile(HttpServletRequest r)throws IOException{
         CommonsMultipartResolver multipartResolver = new CommonsMultipartResolver(r.getSession().getServletContext());  
            if(multipartResolver.isMultipart(r)){  
                MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest)r;  
                Iterator<String> iter = multiRequest.getFileNames();  
                List<DocumentBean> files = new ArrayList<DocumentBean>();
                while(iter.hasNext()){  
                    String para = iter.next();

                    MultipartFile file = multiRequest.getFile(para);  
                    if(file != null){  
                        if (file.getSize() > fileStore.getMaxFileSize()) {
                            logger.error("File Upload failed !  File Size can not More then "
                                    + fileStore.getMaxFileSize() / 1024 + " K");
                            continue;
                        }
                        DocumentBean doc = new DocumentBean();
                        String myFileName = file.getOriginalFilename();  
                        int index = myFileName.lastIndexOf(".");
                        String suffix = myFileName.substring(index + 1);
                        doc.setParameter(para);
                        doc.setFullname(myFileName);
                        doc.setSize(file.getSize());
                        doc.setSuffix(suffix);
                        doc.setFiletype(suffix.toUpperCase());
                        doc.setName(myFileName.substring(0,index-1));
                        try {
                            doc.setIo(file.getInputStream());
                            fileStore.saveFile(uInfo, doc);
                        } catch (IOException e) {
                            e.printStackTrace();
                        } catch (Exception e) {
                            e.printStackTrace();
                        }

                        files.add(doc);
                    }  
                }  
                return files;
            }  
  • FormData也可以提交很复杂的数据类型,比较复杂的可以将他用字符串提交,然后在服务端将字符串解析成对象(java一般用阿里的fastJson包解析)

杂记:今天是同事小胖的生日,祝小胖生日快乐,大家一起吃了个饭,一起打了会桌球,听老大讲了很多,;

版权声明:本文为博主原创文章,未经博主允许不得转载。

从image/x-png谈文件上传中的ContentType属性

从image/x-png谈ContentType(s) 今天在做一个文件上传的功能的时候,发现我总是上传不了png的图片。经过调试发现,应该是在ContentType的地方判断失误了...
  • guangmingfupin
  • guangmingfupin
  • 2012年07月05日 10:04
  • 5695

php中利用header设置content-type和常见文件类型的content-type

php中利用header设置content-type和常见文件类型的content-type 在PHP中可以通过header函数来发送头信息,还可以设置文件的content-type...
  • hello_katty
  • hello_katty
  • 2015年06月23日 07:44
  • 3819

Http请求中Content-Type讲解以及在Spring MVC中的应用

引言: 在Http请求中,我们每天都在使用Content-type来指定不同格式的请求信息,但是却很少有人去全面了解content-type中允许的值有多少,这里将讲解Content-Type的可用值...
  • blueheart20
  • blueheart20
  • 2015年04月22日 16:01
  • 280130

Multipart/form-data POST文件上传详解

Multipart/form-data POST文件上传详解 理论 简单的HTTP POST 大家通过HTTP向服务器发送POST请求提交数据,都是通过form表单提交的,代码如下:   ...
  • xiaojianpitt
  • xiaojianpitt
  • 2011年10月09日 17:45
  • 291452

jquery FormData异步提交文件

.a-upload { padding: 4px 10px; height: 20px; line-height: 20px; posi...
  • qq975309666
  • qq975309666
  • 2016年11月12日 11:02
  • 119

Jquery FormData文件异步上传 快速指南

网站中文件的异步上传是个比较麻烦的问题,不过现在通过jquery 可以很容易的解决这个问题;...
  • a610786189
  • a610786189
  • 2017年04月08日 20:13
  • 318

通过Ajax方式上传文件,使用FormData进行Ajax请求

通过传统的form表单提交的方式上传文件: 测试通过Rest接口上传文件 指定文件名: 上传文件: 关键字1: 关键字2...
  • Inuyasha1121
  • Inuyasha1121
  • 2016年07月15日 11:36
  • 43416

关于ajax中contenttype=false的问题

在刚接触 JQuery 中的 ajax 时,对其 contentType 并没有很在意,只是知晓它是代表发送信息至服务器时内容编码类型,通俗点说就是告诉服务器从浏览器提交过来的数据格式。 默...
  • toubaokewu
  • toubaokewu
  • 2017年07月10日 11:34
  • 1880

HTML5 FormData的使用方法

现代WEB应用中频繁使用的一项功能就是表单数据的序列化,XMLHttpRequest 2级为此特地定义了FormDta类型,FormData为序列化表单以及创建与表单格式相同的数据(用于通过XHR传输...
  • u012557538
  • u012557538
  • 2015年05月19日 22:37
  • 3435

ajax content-Type注意事项

content-Type定义的是发送至服务器的数据类型,data-Type定义的是服务器返回的数据类型。 如果不指定 ContentType,默认为text/html,表单数据默认为applic...
  • u011628981
  • u011628981
  • 2016年12月14日 10:00
  • 2069
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:利用FormData异步提交content-type为jpg,等流方面信息 --2016.04.20
举报原因:
原因补充:

(最多只允许输入30个字)