如何使用 XMLHttpRequest 使用 multipart 上传文件？

Question

这就是我正在做的事情

var url_action="/temp/SaveConfig";
 var client; 
 var dataString;

 if (window.XMLHttpRequest){ // IE7+, Firefox, Chrome, Opera, Safari
     client=new XMLHttpRequest();
 } else {                    // IE6, IE5
     client=new ActiveXObject("Microsoft.XMLHTTP");
 }

 client.onreadystatechange=function(){

     if(client.readyState==4&&client.status==200)
     {
         alert(client.responseText);

     }
 };

 //dataString=document.getElementById("tfile").value;
 client.open("POST",url_action,true);
 client.setRequestHeader("Content-type", "multipart/form-data"); 
 client.setRequestHeader("Connection", "close");     
 client.send();

但是在服务器端我得到org.apache.commons.fileupload.FileUploadException：请求被拒绝，因为没有找到多部分边界

我哪里出错了？

阅读 Aticus 的回复后 这就是我所做的，文件正在上传。

var form=document.forms["mainForm"];

 form.setAttribute("target","micox-temp");
 form.setAttribute("action",url_action);
 form.setAttribute("method","post");
 form.setAttribute("enctype","multipart/form-data");
 form.setAttribute("encoding","multipart/form-data");
 form.submit();

但现在我如何从 servlet 接收值来执行 JSON 之外的某种检查？

Answer 1

在即将推出的 XMLHttpRequest 版本 2 之前，您无法使用 Ajax 上传文件。

当前大多数基于 Ajax 的文件上传器都使用 hack。它使用 JS 代码创建一个不可见的 ，其中表单被复制并同步提交。父页面将保持不变，看起来就像是异步完成的一样。

为了获得最佳的跨浏览器兼容性并最大程度地减少编写跨浏览器兼容代码的麻烦，我强烈建议使用现有的 JS 库，该库擅长处理 ajaxical 内容和遍历/操作 HTML DOM 树，例如 jQuery。它附带了大量的表单上传插件，最简单的一个是 jQuery 表单插件。在隐藏的 hack 的帮助下，它还支持文件上传。然后它基本上就像

<script src="jquery.js"></script>
<script src="jquery-form.js"></script>
<script>
    $(document).ready(function() {
        $('#formid').ajaxForm(function(data) {
            // Do something with response.
            $('#result').text(data.result);
        });
    });
</script>
...
<form id="formid" action="upload" method="post" enctype="multipart/form-data">
    <input type="file" name="file" />
    <input type="submit" />
</form>
<div id="result"></div>

在服务器端一样简单，只需一个 servlet ，它以通常的方式处理请求，或者使用Servlet 3.0 提供了 HttpServletRequest#getParts() 或使用旧的 Apache Commons FileUpload (示例在这里）。

无论哪种方式，您都可以按照通常的方式将响应返回为 JSON

Map<String, Object> data = new HashMap<String, Object>();
data.put("result", "Upload successful!");
// ...
response.setContentType("application/json");
resposne.setCharacterEncoding("UTF-8");
resposne.getWriter().write(new Gson().toJson(data));

有关更多 Ajax-Servlet-JSON 示例，请检查 这个答案。

Answer 2

文件无法通过此类异步请求传输。您需要以多部分形式提交。

根据文件的内容，您可以将数据存储在 post 变量中。