Как отправить файл и данные, используя сплав пользовательский интерфейс AJAX вызова в Liferay

Question

У меня следующий фрагмент кода для легкосплавных UI Script:

AUI().use('aui-base','aui-io-request', function(A){   
     A.io.request('<%=submitJobApplicationByAjax%>',{ 
      dataType: 'json', 
      method: 'POST', 
      data:{     
       "appliedPosition": A.one("#<portlet:namespace/>appliedPosition").val(), 
       "fullName" : A.one("#<portlet:namespace/>fullName").val(), 


      }, 
      on: { 
      success: function() { 

       } 
      } 
     }); 
    }); 

И следующий вид:

<input class="span12" type="text" name="<portlet:namespace/>fullName" id="<portlet:namespace/>fullName"       value="${fullName}" required="required" pattern=".*\S+.*" /> 
<input class="span12 file_up_btn" type="file"        name="<portlet:namespace/>uploadResume" required="required"        id="<portlet:namespace/>uploadRes" onclick="<portlet:namespace/>clearErrorMsg()" /> 

Как отправить файл и данные вместе с alloy ui ajax call в liferay.

Answer 1

Вы можете использовать FormData для отправки файлов с помощью AJAX,

var file_data = $("#fileName").prop("files")[0]; 
// Creating object of FormData class 
var formData = new FormData(); 
// Appending parameter named file with properties of file_field to form_data 
formData.append("fileName", file_data); 
formData.append("appliedPosition", "someValue"); 
formData.append("fullName", "someValue"); 
A.io.request('<%=submitJobApplicationByAjax%>',{ 
     dataType: 'json', 
     method: 'POST', 
     data: formData, 
     ......... 
     ......... 

Однако это решение не будет работать для IE9.

ПРИМЕЧАНИЕ. Вы также можете проверить AUILiferay.Upload, если вас интересует AUI.

Answer 2

В своем коде вы используете

A.one("#<portlet:namespace/>appliedPosition").val() 

, чтобы получить значение appliedPosition.

Правильный код для использования

A.one("#<portlet:namespace/>appliedPosition").get("value") 

при использовании alloyui.

Кроме того, вы можете прочитать следующее.

Вы можете использовать следующий url, чтобы узнать больше об этом.

http://yuilibrary.com/yui/docs/io/#uploading-files-in-an-html-form

Мы можем поставить этот кусок кода непосредственно в нашем alloyui коде.

AUI(). Готовый ('модуль-name1', 'modulename2', функция() {

/* 
* This example demonstrates how to configure io to upload files 
* from an HTML form. This example uses the global events: 
* "io:start" and "io:complete" to handle the transaction and 
* response. Transaction events can be defined and fired, as well, 
* in the configuration object; but, they are not used in this 
* example. 
*/ 
// Create a YUI instance using the io-upload-iframe sub-module. 
YUI().use("io-upload-iframe", function(Y) { 
    // Create a configuration object for the file upload transaction. 
    // The form configuration should include two defined properties: 
    // id: This can be the ID or an object reference to the HTML form 
    //  containing the input type="file" elements. 
    // upload: Set this property to "true" to indicate this is a file 
    //   upload transaction. 
    var cfg = { 
     method: 'POST', 
     form: { 
      id: formObject, 
      upload: true 
     } 
    }; 

    // Define a function to handle the start of a transaction 
    function start(id, args) { 
     var id = id; // Transaction ID. 
     var args = args.foo; // 'bar' 
    } 

    // Define a function to handle the response data. 
    function complete(id, o, args) { 
     var id = id; // Transaction ID. 
     var data = o.responseText; // Response data. 
     var args = args[1]; // 'ipsum'. 
    }; 

    // Subscribe to event "io:start", and pass an object 
    // as an argument to the event handler "start". 
    Y.on('io:start', start, Y, { 'foo':'bar' }); 

    // Subscribe to event "io:complete", and pass an array 
    // as an argument to the event handler "complete". 
    Y.on('io:complete', complete, Y, ['lorem', 'ipsum']); 

    // Start the transaction. 
    var request = Y.io(uri, cfg); 
}); 

}); 

Я считаю, что мы можем использовать A.io.request тоже. Кроме того, вы должны установить

enctype: "multipart/form-data" 

в конфигурации для запроса Ио.