Question

我在我的网站上配置文件上传功能。该计划的工作就像一个魅力！虽然我使用Ajax来处理php响应。问题是，当我点击submit时，它会将我重定向到php并且不会将echo返回给我的ajax。我尝试了e.preventDefault()和return false到Ajax，但是没有用。

这是我的文件

HTML

<form style="margin-top: -20px; width: inherit; cursor: default;" name="photo" id="imageUploadForm" enctype="multipart/form-data"  method="post" action="../lib/imgUpload.php">
      <input type="file" name="image" id="ImageBrowse"  style='//visibility:hidden;'>
      <button type="submit" name="upload" id="UploadImageBtn" value="Upload">Upload</button>
</form>

JS

$(document).ready(function(e){
    //many many other functions

    $('#imageUploadForm').on('submit', function(e) {
        var formData = new FormData(this);

        $.ajax({
            type:'POST',
            url: $(this).attr('action'),
            data:formData,
            cache:false,
            contentType: false,
            processData: false,
            success:function(data){
                alert(data);

            },
            error: function(data){
                alert('bad');
            }
        });
        e.preventDefault();

    }));

    $("#ImageBrowse").on("change", function(e) {
        e.preventDefault();
        $("#imageUploadForm").submit();
    });
});

PHP

<?php
    session_start();
    $sourcePath = $_FILES['image']['tmp_name'];      
    $targetPath = "profile_avatars/".$_FILES['image']['name'];
    $res = move_uploaded_file($sourcePath,$targetPath) ; 
    if ($res) {
        echo "yes";
    }
    else {
        echo "no";
    }
?>

Answer 1

尝试在其他代码行之前执行e.preventDefault（），如下所示：

$('#imageUploadForm').on('submit', function(e) {

    e.preventDefault();

    var formData = new FormData(this);

    $.ajax({
        method:'POST',
        url: "../lib/imgUpload.php",
        data:formData,
        cache:false,
        contentType: false,
        processData: false,
        success:function(data){
            alert(data);

        },
        error: function(data){
            alert('bad');
        }
    });
});

在此功能结束时，还有一个圆形闭合括号。

尝试从表单元素中删除操作，并返回false，如下所示：

 <form style="margin-top: -20px; width: inherit; cursor: default;" name="photo" id="imageUploadForm" enctype="multipart/form-data" onsubmit="return false;">

从表单元素中删除method="POST"并将其添加到您的ajax调用中。

防止Ajax和PHP中的重定向页面

1 个答案: