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

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: 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之外的某種檢查？

Answer 1

文件不能通過此類異步請求傳輸。 您需要以多部分形式提交。

根據文件的不同，您可以將數據存儲在post變量中。

Answer 2

在即將發布的XMLHttpRequest版本2之前，您無法使用Ajax上傳文件。

大多數當前基於Ajax的文件上傳器都使用<iframe> hack。 它使用JS代碼創建一個不可見的<iframe> ，其中表單已被復制並同步提交。 父頁面將保持不變， 看起來好像是異步完成的。

為了獲得最佳的交叉瀏覽器兼容性並最大限度地減少編寫交叉瀏覽器兼容代碼的麻煩，我強烈建議抓住一個現有的JS庫，它擅長處理ajaxical的東西和遍歷/操作HTML DOM樹，比如jQuery 。 它附帶了大量的表單上傳插件，最簡單的是jQuery-form插件 。 它還支持文件上傳以及隱藏的<iframe> 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示例，請查看此答案 。