我如何在 liferay 中使用 alloy ui ajax 调用发送文件和数据

Question

我有以下 ALLOY UI 脚本的代码片段：

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 调用 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。

注意：如果您有兴趣使用 AUI，也可以检查 AUI Liferay.Upload。

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().ready('module-name1', 'modulename2', function(){

/*
 * 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"

在 io 请求的配置中。

我如何在 liferay 中使用 alloy ui ajax 调用发送文件和数据

how do i send file and data using alloy ui ajax call in liferay

liferay

alloy-ui