Question

我试图覆盖表单提交以发送ajax请求但它不起作用。当我只是致电submit()时，页面会被重定向。

我正在尝试实施类似this的内容。

可能是一个jquery版本的问题，或者我使用它是错误的。

这是我的尝试：

＆＃13;

$('#fileUploadField').on("change", function() {
    $("#upload_file").submit(function(e) {
         alert("override");
      e.preventDefault();
    });
});

＆＃13;

.hidden2{
    margin:0;
    padding:0;
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    font-size: 50px;
    cursor: pointer;
    opacity: 0;
    -moz-opacity:0;
    filter: Alpha(Opacity=0);
}
img.fileDownload
{
    height: 26px;
    width: 26px;
    padding: 0;
    display: inline-block; 
    vertical-align: middle;
    margin: 0 4px 0 0;
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
}
div.hiddenFileInputContainter
{
    position: relative;
    display: inline-block;
    width: 27px;
    height: 27px;
    overflow: hidden;
    vertical-align: middle;
    cursor: pointer;
}

＆＃13;

<script  src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id="upload_file" action="upload.php" method="post" enctype="multipart/form-data">
  <div class="hiddenFileInputContainter">
    <img class="fileDownload" src="http://b.dryicons.com/images/icon_sets/coquette_part_2_icons_set/png/128x128/attachment.png" width="10"   height="10">
    <input id="fileUploadField" type="file" name="uploaded_file" class="hidden2">
    </form>

＆＃13;

Answer 1

我不确定这是否有用，我发现您已经在使用e.preventDefault();了 - 您可以尝试使用return false来查看是否可行代替。

您的jQuery submit()函数似乎设置正确。警报是否会启动？（确认提交功能实际上是否有效）？如果警报未触发，则可能是上面的jQuery问题，即$('#fileUploadField').on("change", function() {...}组件。

另一个选择可能是尝试使用更新版本的jQuery，看看是否有任何区别（如果两个函数确实正在执行且警报正在启动）......

Answer 2

我不确定您的目标是什么，但如果您只想基于文件上传字段的change处理程序覆盖表单操作，则可以执行以下操作：

$("#upload_file").submit(function(e) {
    if (this.id === 'upload_file') {
        e.preventDefault();
        // do ajax here;
        alert(this.id);
    } 
});

$('#fileUploadField').on("change", function(e) {
    $("#upload_file").submit();
});

无法覆盖form.submit（）

2 个答案: