Question

我的要求是在点击自定义按钮时使用Jquery内容从表单上传文件。

我的表格详情如下：

<form id="CreateAttachmentForm" method="post"  enctype="multipart/form-data"  action="../../FileUploadServlet" >

我的文件定义如下：

<input type="file" id="fileupload1" name="fileupload1" accept="image/*,application/pdf"    "/>

我的自定义按钮相关代码如下：

<contact:contactbutton
        id="printButton"
        style="position:relative; width:90px; top:27px; height:30px; left:160px;"
        textTop="7px"
        defaultButton="false"
        tabindex=""
        accesskey="C"
        onClickEx="createAttachmentRequest();"
        onfocus="if(event.altKey){click();}">
            <u>C</u>reate
</contact:contactbutton>

每当用户点击自定义按钮时，都应该提交表单。我已经注册了一个onClick事件事件，其中控件应该到达名为createAttachmentRequest()的函数

以下是我的createAttachmentRequest()功能：

function createAttachmentRequest() {
    alert("test ");
    $("#CreateAttachmentForm").submit(function() {

        var formData = new FormData($(this)[0]);

        $.ajax({
            url: 'http://HDDT0214:8080/pqawdTestWebApp/FileUploadServlet',
            type: 'POST',
            data: formData,
            async: false,
            success: function(data) {
                alert(data)
            },
            cache: false,
            contentType: false,
            processData: false
        });

        return false;
    });


}

但是单击自定义按钮时未提交表单。我已经在SO上搜索了各种问题，但到目前为止找不到合适的解决方案。但是我可以看到打印的警告消息确认控件已到达函数createAttachmentRequest()。我的代码出了什么问题？

Answer 1

问题是因为你在函数中附加了一个提交事件处理程序 - 而不是实际提交表单。

最好完全删除createAttachmentRequest()函数，并使用不显眼的JS代码来附加事件。为此，请从onClickEx元素中删除<contact:contactbutton>属性，然后使用此JS代码：

$(function() { 
  $("#CreateAttachmentForm").submit(function(e) {
    e.preventDefault();

    $.ajax({
        url: 'http://HDDT0214:8080/pqawdTestWebApp/FileUploadServlet',
        type: 'POST',
        data: new FormData(this),
        success: function(data) {
          alert(data)
        },
        cache: false,
        contentType: false,
        processData: false
    });
  });
});

另请注意，我删除了async: false，因为使用它是非常糟糕的做法。如果您检查控制台，您甚至会看到有关其使用的警告。

Answer 2

您可以执行以下操作之一：

在函数外部执行submit事件并删除函数，如下所示：

$("#CreateAttachmentForm").submit(function(e) {
e.preventDefault();
var formData = new FormData($(this)[0]);

$.ajax({
    url: 'http://HDDT0214:8080/pqawdTestWebApp/FileUploadServlet',
    type: 'POST',
    data: formData,
    async: false,
    success: function(data) {
        alert(data)
    },
    cache: false,
    contentType: false,
    processData: false
});
return false;
});

或

在函数内部删除提交监听器，如下所示：

function createAttachmentRequest() { alert("test "); var formData = new FormData($(this)[0]); $.ajax({ url: 'http://HDDT0214:8080/pqawdTestWebApp/FileUploadServlet', type: 'POST', data: formData, async: false, success: function(data) { alert(data) }, cache: false, contentType: false, processData: false }); return false; }

Jquery没有使用自定义按钮提交表单

2 个答案: