обновление страницы после нажатия на кнопку для загрузки файлов с ajax - PullRequest
Новая
       6

обновление страницы после нажатия на кнопку для загрузки файлов с ajax

1 голос
/ 03 апреля 2020

У меня есть эта форма, и я хочу отправить файл и некоторую другую информацию через ajax в PHP файл. Моя проблема - когда я пытаюсь загрузить файл, страница обновляется после нажатия на сообщение, как я могу предотвратить refre sh page?

Также, пожалуйста, я хочу четко понять, что это за три варианта и для чего мне нужен каждый из них, я получил его отсюда (переполнение стека из другого поста) 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;
    }
}

Спасибо

1 Ответ

0 голосов
/ 03 апреля 2020

Используйте 

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;
    });
});
...