Почему при повторном клике по кнопке, Ajax срабатывает 2 раза?

Question

[Dmitry2307]

При повторном нажатии кнопки, Ajax выполняется на 1 раз больше. Помогите пожалуйста разобраться
Функция выполняет сохранение картинки на сервер и вывод на экран загруженной картинки

HTML

<form class="upload_img" method="POST" enctype="multipart/form-data">
					<p class="tovar__parser_img">
						<input type="file" id="upload_input" multiple="multiple" name="img">
						<input type="submit" id="upload_img" value="Загрузить файл img">
						<input type="submit" id="upload_imgdop" value="Загрузить файл imgdop">
					</p>
				</form>
				
				<div class="col-4 tovar__parser_imgdop">
					<p>
					</p>
				</div>

JS

// Загрузка файла imgdop
    $("#upload_imgdop").click(function() {
        $(".upload_img").submit(function(event) {
            event.preventDefault();
            
            var fileData = $('#upload_input').prop('files')[0];
            var formData = new FormData(); 
            formData.append('newFile', fileData); 
            
            if (typeof formData == 'undefined') console.log("нет файла");             
            $.ajax({
                type: "post",
                url: "core/upload_img.php",
                data: formData,
                cache: false,
                contentType: false,
                processData: false,
                success: function(data){
                    if (data != 'Файл не загружен' || data != "Файл должен быть менее 2 Мб") {
                        $(".tovar__parser_imgdop p").append('<img src="./img/'+data+'">');
                        var dir = $("#img_parse").val();
                        $(".form__parse_add").find($("input[name=imgdop]")).val(dir+data);
                    } else { console.log(data); }
                    console.log(data);
                }
            });
        });
    });

php

if ($_SERVER["REQUEST_METHOD"] == "POST" && isset($_FILES['newFile'])) {

	$errors = array();
	$file_name = $_FILES['newFile']['name'];
	$file_size = $_FILES['newFile']['size'];
	$file_tmp = $_FILES['newFile']['tmp_name'];
	$file_type = $_FILES['newFile']['type'];

	if ($file_size > 2097152) $errors[] = "Файл должен быть менее 2 Мб";

	if (empty($errors) == true) {
		if (move_uploaded_file($file_tmp, "../img/".$file_name)) echo $file_name;
		else echo "Файл не загружен";
	} else echo $errors;
}

Comments

[Maxim Kirshin]

убери клик event, оставь submit

[Dmitry2307]

Maxim Kirshin, у меня там 2 кнопки и мне необходимо отслеживать по какой кнопке нажали

[Kovalsky]

Dmitry2307, нет, для отправки данных достаточно слушать только сабмит. Если нужна какая-то логика кроме отправки по нажатию на кнопку, то её выносите в отдельный обработчик

Answer 1

[VladJs]

$("#upload_imgdop, .upload_img").click(function(event) {
event.preventDefault();

var fileData = $('#upload_input').prop('files')[0];
var formData = new FormData();
formData.append('newFile', fileData);

if (typeof formData == 'undefined') console.log("нет файла");
$.ajax({
type: "post",
url: "core/upload_img.php",
data: formData,
cache: false,
contentType: false,
processData: false,
success: function(data){
if (data != 'Файл не загружен' || data != "Файл должен быть менее 2 Мб") {
$(".tovar__parser_imgdop p").append(''+data+'');
var dir = $("#img_parse").val();
$(".form__parse_add").find($("input[name=imgdop]")).val(dir+data);
} else { console.log(data); }
console.log(data);
}
});
});

Попробуй так, через кому прописать
$("#upload_imgdop, .upload_img").click(function(event) {
event.preventDefault();

Comments

[Dmitry2307]

Спасибо, данное решение сработало.