Dropzone - 从服务器获取响应

Question

我正在尝试创建一个带有拖放区的页面。 该文件被上传到服务器上，读取成功后必须返回一条信息消息。

一切正常，而不是返回的消息，我无法触发 dropzone 事件的任何事件。

我的配置是：

• 雄猫 7
• 爪哇 8
• 支柱2
• Dropzone.js

这是我的jsp代码

Dropzone.autoDiscover = false;

$(document).ready(function() {

    $("#importIGHEdit").dropzone({
              paramName: "fileTransfert", // The name that will be used to transfer the file
              url: "importIGHAjax.action",
              maxFiles: 1,
              createImageThumbnails: true,// Max numbre of files
              acceptedFiles: "text/xml",
              addRemoveLinks: true,
              autoProcessQueue: false,
              init: function() {
                    var myDropzone = this;
                    var submitButton = document.getElementById("downloadButton");

                    // First change the button to actually tell Dropzone to process the queue.
                    submitButton.addEventListener("click", function(e) {
                      // Make sure that the form isn't actually being sent.
                      e.preventDefault();
                      e.stopPropagation();
                      myDropzone.processQueue();
                      uploadFileIGH();
                    });

                    this.on("addedfile", function(file) { alert("Added file."); });
                    this.on("error", function(file, errorMessage) { console.log(errorMessage); });
                    this.on("processing", function(file) { alert("processing"); });
                    this.on("uploadprogress", function(file) { alert("uploadprogress"); });
                    this.on("sending", function(file) { alert("sending."); });
                    this.on("success", function(file, response) { console.log(response); });
                    this.on("complete   ", function(file) { alert("complete "); });
                    this.on("canceled", function(file) { alert("canceled"); });
                    this.on("successmultiple", function(file) { alert("successmultiple"); });
              },
              success : function(data) {
                  console.log("success");
              },
              accept: function(file, done) {
                  console.log(file.name);
                  done();
              }
            });
});

<s:form name="formMain" action="importIGHEdit"
enctype="multipart/form-data" acceptcharset="UTF-8" cssClass="dropzone all">
<input type="hidden" name="cod_hack" value="&#153;" />
<s:hidden name="id" />
<s:hidden name="action" />
<s:hidden id="total" name="total" />
<tr>
    <td>
        <div id="divMain" class="tabContent">
            <table class="all">
                <tr>
                    <td>
                        <fieldset>
                            <legend>
                                <s:text name="tab.importIGH.legend.definition" />
                            </legend>
                            <table>
                                <s:action name="listCategorieArticle" id="list"
                                    executeResult="false" />
                                <s:select key="noCategorieArticle"
                                    list="#session.listCategorieArticle"
                                    listKey="NoCategorieArticle" listValue="caaLibelleCategorie" />

                                <s:if test="%{withTVA()}">
                                    <s:action name="listCodeCategorieTVA" id="list"
                                        executeResult="false" />
                                    <s:select key="codeCategorieTVA" headerKey="" headerValue=""
                                        list="#session.listCodeCategorieTVA"
                                        listKey="codeCategorieTVA" listValue="ctvLibelleLong"
                                        value="defaultTVA" />
                                </s:if>

                                <s:action name="listMonnaie" id="list" executeResult="false" />
                                <s:select key="noMonnaie" list="#session.listMonnaies"
                                    listKey="noMonnaie" listValue="MON_LibelleCourt" />
                                <sj:autocompleter key="noCompte" list="listPlanComptable"
                                    listKey="pcoNoCompte" listValue="pcoNoCompteCompteLibelle"
                                    onSelectTopics="autocompleteSelect"
                                    onChangeTopics="autocompleteChange"
                                    onFocusTopics="autocompleteFocus" />
                            </table>
                        </fieldset>
                    </td>
                </tr>
            </table>
        </div>
    </td>
</tr>

这是我捕获 ajax 调用的 java 方法

public String saveFileAjax() throws Exception{

    this.setAjxReturn(new HashMap<String, Object>());

    this.checkMandatoryFields();

    if(this.article.existsIndex(databaseName)){
        dropIndex();
    }

    importDataIGH();

    callProc();

    if(!this.article.existsIndex(databaseName)){
        createIndex();
    }

    return SUCCESS;
}

以及 json 的操作

<action name="importIGHAjax" class="patinfo.gestionprojet.admin.ImportIGHEditAction" method="saveFileAjax">
  <result type="json" >
    <param name="root">ajxReturn</param>
  </result>
  <result name="success" type="json" >
    <param name="root">ajxReturn</param>
    <param name="statusCode">202</param>
  </result>
</action>

上传文件被阻止到这个状态

开发工具标题看起来像这样

Request URL:http://localhost:8080/SAMinfo-tomcat/importIGHAjax.action
Referrer Policy:no-referrer-when-downgrade
Request Headers
Provisional headers are shown
Accept:application/json
Cache-Control:no-cache
Content-Type:multipart/form-data; boundary=----        WebKitFormBoundaryOYcna7y1OO7AhWHA
Origin:http://localhost:8080
Referer:http://localhost:8080/SAMinfo-tomcat/importIGHEdit.action
User-Agent:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.94 Safari/537.36
X-Requested-With:XMLHttpRequest
Request Payload
------WebKitFormBoundaryOYcna7y1OO7AhWHA
Content-Disposition: form-data; name="cod_hack"

™
------WebKitFormBoundaryOYcna7y1OO7AhWHA
Content-Disposition: form-data; name="id"


------WebKitFormBoundaryOYcna7y1OO7AhWHA
Content-Disposition: form-data; name="action"

patinfo.gestionprojet.admin.ImportIGHEditAction@1aa6564d
------WebKitFormBoundaryOYcna7y1OO7AhWHA
Content-Disposition: form-data; name="total"


------WebKitFormBoundaryOYcna7y1OO7AhWHA
Content-Disposition: form-data; name="noCategorieArticle"

1
------WebKitFormBoundaryOYcna7y1OO7AhWHA
Content-Disposition: form-data; name="codeCategorieTVA"

A
------WebKitFormBoundaryOYcna7y1OO7AhWHA
Content-Disposition: form-data; name="noMonnaie"

1
------WebKitFormBoundaryOYcna7y1OO7AhWHA
Content-Disposition: form-data; name="noCompte"

3400
------WebKitFormBoundaryOYcna7y1OO7AhWHA
Content-Disposition: form-data; name="noCompte_widget"

3400
------WebKitFormBoundaryOYcna7y1OO7AhWHA
Content-Disposition: form-data; name="fileTransfert"; filename="BELIMO-1330-    2018-01-fr.xml"
Content-Type: text/xml


------WebKitFormBoundaryOYcna7y1OO7AhWHA--

Answer 1

你可以使用success

$("div#js-dropzone").dropzone({
    url: "/api/mmm/orders/fileupload",
    method: 'POST',
    success: function (response) {
        console.log(response.xhr.response);
    }
});