Отмена отправки формы на сервер

@Cтанислав · Регистрация: 15.04.2013

Студворк — интернет-сервис помощи студентам

Добрый вечер всем. Есть задача отправить AJAX'ом файл на сервер и обработать его php скриптом.
Дело в том, что это должно происходить по ссылке.
Название: 123.JPG
Просмотров: 189

Размер: 11.5 Кб

Название: 123.JPG
Просмотров: 189

Размер: 11.5 Кб

Сразу говорю что в верстке не силен.
Я положил наверх ссылки форму и выставил прозрачность у кнопки загрузки файла.
Теперь стоит задача отправить этот файл на сервер как только его выберут.
Вот форма.

HTML5
1
2
3
<form method="post" enctype="multipart/form-data" id="change_photo" action="/local/include/ajax/load_image.php">
    <input type="file" id="userfile" name="userfile" style="opacity: 100; cursor: pointer;" onchange="this.form.submit()"/>
</form>

Вот скрипт.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$("#change_photo").submit(function (event) {
            event.preventDefault();
            var data = new FormData($('#change_photo')[0]);
            $.ajax({
                type: "POST",
                url: "/local/include/ajax/load_image.php",
                data: data,
                contentType: false,
                processData: false,
                beforeSend: function() {
                    alert('Before Send');
                }
            }).done(function (html) {
                alert('Done');
                alert(html);
                $('#mainForm')[0].reset();
            });
        });

Вот какое дело, если запустить этот пример сейчас, то форма отправиться, а страница обновиться. Но если я уберу у инпута событие onchange и добавлю кнопку submit, то все работает прекрасно.
Вопрос следующий: как мне быть и почему не работает event.preventDefault() если я отправляю форму через событие? Может можно сделать как нибудь по другому? Главная задача что выглядеть должно так как на скрине, т.е. загружаться картинка должна по "ссылке".
Буду благодарен за любые ответы.

@Faust971 · 15.05.2014, 22:00

Попробуйте

JavaScript
1
return false;

@Cтанислав · 16.05.2014, 10:28 **[ТС]**

Faust971, Пробовал конечно, не работает

@nexus · 16.05.2014, 10:45

а как ты обрабатываешь событие клика по ссылке "Загрузить"? Вот здесь как раз и нужно делать

JavaScript
1
return false;

т.к. при клике на ссылку скорее всего происходит переход по урлу и страница обновляется.

@Cтанислав · 16.05.2014, 18:26 **[ТС]**

на ссылке стоит return false

HTML5
1
2
3
4
5
6
<div class="avatar_upload">
    <form method="post" enctype="multipart/form-data" id="change_photo" action="/local/include/ajax/load_image.php">
        <input type="file" id="userfile" name="userfile" style="opacity: 100; cursor: pointer;" onchange="form.submit()"/>
    </form>
    <a href="#" onclick="return false" id="add_link">Загрузить</a>
</div>

Добавлено через 2 часа 48 минут
Никто не знает как остановить обновление странице в данной ситуации что ли?

Добавлено через 4 часа 32 минуты
Решил:
Вот HTML:

HTML5
1
2
3
4
<div class="avatar_upload">
    <input type="file" id="userfile" name="userfile" style="opacity: 0; cursor: pointer; position: absolute" onchange="ChangePhoto()"/>
    <a href="#" onclick="return false" id="add_link">Загрузить</a>
</div>

JS:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
    var fd = new FormData();
    fd.append('userfile', $('#userfile')[0].files[0]);
 
    $.ajax({
        type: 'POST',
        url: '/local/include/ajax/load_image.php',
        data: fd,
        processData: false,
        contentType: false,
        success: function(data) {
            var result = jQuery.parseJSON(data);
            if (result.success)
            {
                document.getElementById('personal_photo').src = result.src;
            }
            else
            {
                alert(result.message);
            }
        },
        error: function(data) {
            alert('error');
        }
    });

Новые блоги и статьи Все статьи Все блоги /
Модель здравосоХранения 6. ESG-повестка и устойчивое развитие; углублённый анализ кадрового бренда anaschu 31.03.2026 В прикрепленном документе раздумья о том, как можно поменять модель в будущем	10 пpимет, которые всегда сбываются Maks 31.03.2026 1. Чтобы, наконец, пришла маршрутка, надо закурить. Если сигарета последняя, маршрутка придет еще до второй затяжки даже вопреки расписанию. 2. Нaдоели зима и снег? Не надо переезжать. Достаточно. . .	Перемещение выделенных строк ТЧ из одного документа в другой Maks 31.03.2026 Реализация из решения ниже выполнена на примере нетипового документа "ВыдачаОборудованияНаСпецтехнику" с единственной табличной частью "ОборудованиеИКомплектующие" разработанного в конфигурации КА2. . . .	Functional First Web Framework Suave DevAlt 30.03.2026 Sauve. IO Апнулись до NET10. Из зависимостей один пакет, работает одинаково хорошо как в режиме проекта так и в интерактивном режиме. из сложностей - чисто функциональный подход. Решил. . .
Автоматическое создание документа при проведении другого документа Maks 29.03.2026 Реализация из решения ниже выполнена на нетиповых документах, разработанных в конфигурации КА2. Есть нетиповой документ "ЗаявкаНаРемонтСпецтехники" и нетиповой документ "ПланированиеСпецтехники". В. . .	Настройка движения справочника по регистру сведений Maks 29.03.2026 Решение ниже реализовано на примере нетипового справочника "ТарифыМобильнойСвязи" разработанного в конфигурации КА2, с целью учета корпоративной мобильной связи в коммерческом предприятии. . . .	Автозаполнение реквизита при выборе элемента справочника Maks 27.03.2026 Программный код из решения ниже на примере нетипового документа "ЗаявкаНаРемонтСпецтехники" разработанного в конфигурации КА2. При выборе "Спецтехники" (Тип Справочник. Спецтехника), заполняется. . .	Сумматор с применением элементов трёх состояний. Hrethgir 26.03.2026 Тут. https:/ / fips. ru/ EGD/ ab3c85c8-836d-4866-871b-c2f0c5d77fbc Первый документ красиво выглядит, но без схемы. Это конечно не даёт никаких плюсов автору, но тем не менее. . . всё может быть. . .

@Cтанислав 30 / 30 / 8 Регистрация: 15.04.2013 Сообщений: 244
	16.05.2014, 10:28 [ТС]
	Faust971, Пробовал конечно, не работает 0