按下按钮后刷新页面以使用 ajax 上传文件答案

【问题标题】：page refreshing after pressing on button to upload files with ajax按下按钮后刷新页面以使用 ajax 上传文件
【发布时间】：2020-07-15 05:20:23
【问题描述】：

我有这个表格，我想通过 ajax 将文件和其他一些信息发送到 PHP 文件我的问题是当我尝试下载文件时，按post后页面刷新，如何防止刷新页面？

另外，我想清楚地了解这三个选项是什么，以及我到底需要什么，我从这里得到它（另一个帖子的堆栈溢出）contentType: false,cache: false,processData: false,

在没有这三个选项的情况下尝试上传时，我只是在控制台日志中收到此错误消息（非法调用）。

<form action="" method="post" id="image-form" enctype="multipart/form-data">
    <input type="file" id="imgInp" name="imgInp"/>
    <input type="text" id="postNum" name="postNum" value="<?= $postNum; ?>"/>
    <input type="button" id="sendImage" value="Upload"/>
    <div id="blah"></div>
</form>

$("#sendImage").click(function() {
    var thisData = $('#image-form')[0];
    console.log(thisData);
    $("#msg").html('<div class="alert alert-info"><i class="fad fa-spin fa-spinner"></i> Please wait...!</div>');
    $.ajax({
        type: "POST",
        method: "POST",
        url: "data.php?uploadImage=1",
        data: new FormData(thisData),
        contentType: false,
        cache: false,
        processData: false,
        success: function(data) {
            console.log(data);
            if (data == 1 || parseInt(data) == 1) {
                $("#msg").html(
                    '<div class="alert alert-success"><i class="fa fa-thumbs-up"></i> Data updated successfully.</div>'
                );
            } else {
                $("#msg").html(
                    '<div class="alert alert-info"><i class="fa fa-exclamation-triangle"></i> Extension not good only try with <strong>GIF, JPG, PNG, JPEG</strong>.</div>'
                );
            }
        },
        error: function(data) {
            $("#msg").html(
                '<div class="alert alert-danger"><i class="fa fa-exclamation-triangle"></i> There is some thing wrong.</div>'
            );
        }
    });
});

$postNum= $_POST['postNum'];
$file = $_FILES['imgInp']['name'];
$file_image = '';
if($_FILES['imgInp']['name']!=""){
    extract($_REQUEST);
    $infoExt        =   getimagesize($_FILES['imgInp']['tmp_name']);
    if(strtolower($infoExt['mime']) == 'image/gif' || strtolower($infoExt['mime']) == 'image/jpeg' || strtolower($infoExt['mime']) == 'image/jpg' || strtolower($infoExt['mime']) == 'image/png'){
        $file   =   "Q-".$postNum.".".pathinfo($file, PATHINFO_EXTENSION);;
        $path   =   'includes/images/uploads/specialUploads/'.$file;
        move_uploaded_file($_FILES['imgInp']['tmp_name'],$path);

        $insert     =   1;
        if($insert){ echo 1; } else { echo 0; }
    }else{
        echo 2;
    }
}

谢谢

【问题讨论】：

标签： jquery ajax upload

【解决方案1】：

使用

e.preventDefault();
return false;

为了防止表单提交，也将整个代码放在 JQuery 文档中准备好

$("document").ready(function() {
    $("#sendImage").click(function(e) {
        var thisData = $('#image-form')[0];
        console.log(thisData);
        $("#msg").html('<div class="alert alert-info"><i class="fad fa-spin fa-spinner"></i> Please wait...!</div>');
        /* ajax call */
        e.preventDefault();
        return false;
    });
});

【讨论】：

我只是将 e 添加到函数并添加 e.preventDefault();返回假；但问题没有解决！页面刷新
先生 e.preventDefault(); return false; 不工作页面仍然刷新:(
你说得对，我认为将监听器放入准备好的文档中应该可以解决它，我编辑了答案。