使用FormData

骑猪看日落 2022-07-13 06:22 169阅读 0赞

FormData可以利用AJAX技术进行上传文件

/* HTML中*/
    上传文件<input type = 'file' id = "UploadFile" accept = 'image/*'/><br/>
    
    上传类型:   <input type="text" id = "UploadFileType" size="30" value = "image"/>这里参数只支持 blog image<br/>
          <button onclick = "upload();">上传</button>
    
    /*javascript*/
    var request = new XMLHttpRequest();                             // 请求器
        request.open("post",sy() + "/Servlet/UploadServlet",true);      // 设置地址
    
        var fileElement = document.getElementById("UploadFile");        // 获取文件Element
        var FileType = document.getElementById("UploadFileType").value; // 获取上传类型
    
        var formData = new FormData();                              // 新建模拟表单数据
        formData.append("FileType",FileType);                       // 加入参数 FilType=image
        formData.append("userFile",fileElement.files[0]);           // 加入参数userFile
    
        request.send(formData);     //发送表单请求

但值得注意的是，如果使用的是servlet，那么用了formData后，就无法用`request.getParameter("userName")` 这种比较简单的方式获取参数名了，可以自己解析字符串流来获取参数，或者使用更为方便的第三方库`Commons-fileupload.jar`

## 传递上去的变成了字节流 ##

------WebKitFormBoundaryvx6kTCo7RQW0jAAc
    Content-Disposition:
    form-data;
    name="userName"
    dsaf
    ------WebKitFormBoundaryvx6kTCo7RQW0jAAc
    Content-Disposition:
    form-data;
    name="nickName"
    fadsf
    ------WebKitFormBoundaryvx6kTCo7RQW0jAAc
    Content-Disposition:
    form-data;
    name="email"
    fadf
    ------WebKitFormBoundaryvx6kTCo7RQW0jAAc
    Content-Disposition:
    form-data;
    name="password"
    fadf
    ------WebKitFormBoundaryvx6kTCo7RQW0jAAc--

具体的原因是：

> 当表单出现MULTIPART/FORM-DATA的时候，提交就不再是以参数形式提交了，浏览器会把所有参数封装在一个流里面提交。  
> 你要获得提交的值可以通过request.getInputStream来获得，你可以暂时把这个流保存在一个地方，分析这个流的组成，然后截取需要的部分。