如何在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()" />

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

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，也可以检查AUILiferay.Upload。

Answer 2

在代码中使用

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

以获取appliedPosition值。

正确的代码是使用

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

使用alloyui时。

此外，您还可以阅读以下内容。

您可以使用以下网址了解更多信息。

http://yuilibrary.com/yui/docs/io/#uploading-html格式中的文件

我们可以把这个代码直接放在alloyui代码中。

AUI（）.ready（"模块名称1"，"模块名称2"，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请求的配置中。