Ajax загрузка изображений

Question

У меня есть форма, в которой я выполняю загрузку ajax-изображения, вызванного событием onChange для элемента ввода (файла). Загрузка изображения ajax работает нормально, но я заметил, что изображение снова загружается при отправке формы. Как я могу предотвратить повторную загрузку изображения?

Answer 1

Вы можете привязать событие submit для формы и очистить значение входного файла, чтобы оно оставалось пустым при отправке формы:

$('#your-form-id').on('submit', function () {
    $('#your-file-input').val('');
    return true;
});

Вы также можете переместить ввод файла за пределы остальной формы, так что будет два тега формы, но вы можете использовать position : absolute;, чтобы расположить ввод файла так, как если бы он находился внутри другой формы.

Answer 2

Если файл input обрабатывается отдельно от формы (с помощью вызова AJAX) и не должен быть частью формы, переместите его за пределы тега form. Это, вероятно, повлияет на макет вашей страницы, поэтому вы можете внести некоторые изменения в стиль. Но подумайте об этом с точки зрения простого взгляда на HTML-разметку. Элементы, которые не являются частью родительских элементов, не должны быть вложены в эти родительские элементы.

Answer 3

В вашем HTML действие формы должно быть пустым:

<form action="">

В коде JS используйте:

$('#submut').click(function(){
    var //get var by jQuery
});
//Your $ajax code here...

Answer 4

Я думаю, что вы должны отправить форму, используя javascript в событии onchange