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

时间:2011-05-09 08:34:07

标签: java javascript servlets

这就是我正在做的事情

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: the request was rejected because no multipart boundary was found

我哪里错了?

阅读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之外的某种检查?

2 个答案:

答案 0 :(得分:1)

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

根据文件的不同,您可以将数据存储在post变量中。

答案 1 :(得分:1)

在即将发布的XMLHttpRequest版本2之前,您无法使用Ajax上传文件。

目前大多数基于Ajax的文件上传程序都使用<iframe>黑客攻击。它使用JS代码创建一个不可见的<iframe>,其中表单已被复制并同步提交。父页面将保持不变,看起来像,就像它是异步完成一样。

为了获得最佳的交叉浏览器兼容性并最大限度地减少编写交叉浏览器兼容代码的麻烦,我强烈建议你抓住一个现有的JS库,它擅长处理ajaxical东西和遍历/操作HTML DOM树,比如{{3 }}。它附带了大量的表单上传插件,最简单的是jQuery。它还支持文件上传以及隐藏的<iframe>黑客的帮助。这基本上和

一样简单
<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>

在服务器端,只需要jQuery-form plugin以常规方式处理请求,或者使用Servlet 3.0提供HttpServletRequest#getParts(),或者使用旧的Apache Commons FileUpload(servlet

无论哪种方式,您都可以通过常规方式将响应作为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示例,请查看examples here