Squeak.ru - шаблоны программирования

Ajax действует как метод GET, хотя это метод POST

Здравствуйте, я столкнулся с проблемой при написании кода на Javascript и PHP (Ajax без jquery). Я пытаюсь загрузить файл через Ajax и обработать его в PHP.

Это мой код:

index.html

<html>
<head>
<title>PHP AJAX Upload</title>

<script type="text/javascript">


function upload() {
    // 1. Create XHR instance - Start
    var dat= "bla";
    document.getElementById("div2").innerHTML = "working";
   if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest();
    }
    else if (window.ActiveXObject) {
        xhr = new ActiveXObject("Msxml2.XMLHTTP");
    }
    else {
        throw new Error("Ajax is not supported by this browser");
    }

    var rad = document.getElementById('fajl');
    var filee = rad.files[0];

    var formData = new FormData();
    formData.append('rad',filee)
    formData.append('var',dat)

    xhr.open('POST', 'upload.php'); 


    xhr.send(formData);

    xhr.onload = function () {
        if (xhr.readyState === 4 && xhr.status == 200) {

                document.getElementById("div2").innerHTML = xhr.responseText;
                //alert(xhr.readyState);
                //alert(xhr.status);
             }       
    }
}

</script>
</head>
<body>

<form id="uploadForm"  enctype="multipart/form-data">
<label>Upload File:</label><br/>
<input name="rad" id="fajl" type="file" class="inputFile" />
<input type="submit" value="Submit" class="btnSubmit" onclick="upload()" />
<div id="div2">
</div>

</form>
</body>
</html>

загрузить.php

<?php

if(is_array($_FILES)) {
if(is_uploaded_file($_FILES['rad']['tmp_name'])) {
$sourcePath = $_FILES['rad']['tmp_name'];
$targetPath = "images/".$_FILES['rad']['name'];
if(move_uploaded_file($sourcePath,$targetPath)) {
echo ("uspjeh<br>");

}}
}
$podatak=$_POST['var'];
echo "$podatak"

?>

Проблема в том, что я не вижу ответа PHP-скрипта в своем элементе div2. «Аякс» ведет себя странно, и это меня озадачивает. Я поместил команду оповещения JavaScript в условие xhr.readyState (теперь прокомментировано). Когда я это делаю, я вижу вывод, но когда я закрываю диалоговое окно предупреждения, браузер автоматически перезагружает страницу и делает URL-адрес, как если бы я использовал метод GET (я использую POST), а затем вывод сервера исчезает. (rad в ?rad=... — это имя моего элемента ввода)

введите здесь описание изображения

Когда я не использую команду оповещения, я вообще не вижу вывода, потому что страница перенаправляется очень быстро. Что я теряю?

07.11.2014

Ответы:


1

Это потому, что вы используете кнопку отправки и отправляете форму. Методами формы по умолчанию являются GET-запросы. Вместо этого измените просто кнопку:

<input type="button" value="Submit" class="btnSubmit" onclick="upload()" />
07.11.2014

2

Выполняется действие формы по умолчанию (отправка).

Чтобы остановить это, добавьте return false в обработчик кликов:

onclick="upload(); return false;" 
07.11.2014
  • спасибо вам обоим, я хотел бы принять оба ответа ... или, по крайней мере, проголосовать, но у меня еще нет репутации, чтобы сделать это :) 08.11.2014
  • Нет проблем, рад, что смог вам помочь 08.11.2014
  • Новые материалы

    Угловая структура архитектуры
    Обратите внимание, что эта статья устарела, я решил создать новую с лучшей структурой и с учетом автономных компонентов: https://medium.com/@marekpanti/angular-standalone-architecture-b645edd0d54a..

    «Данные, которые большинство людей используют для обучения своих моделей искусственного интеллекта, поставляются со встроенным…
    Первоначально опубликовано HalkTalks: https://hacktown.com.br/blog/blog/os-dados-que-a-maioria-das-pessoas-usa-para-treinar-seus-modelos-de-inteligencia-artificial- ja-vem-com-um-vies-embutido/..

    Сильный ИИ против слабого ИИ: различия парадигм искусственного интеллекта
    В последние годы изучению и развитию искусственного интеллекта (ИИ) уделяется большое внимание и прогресс. Сильный ИИ и Слабый ИИ — две основные парадигмы в области искусственного интеллекта...

    Правильный способ добавить Firebase в ваш проект React с помощью React Hooks
    React + Firebase - это мощная комбинация для быстрого и безопасного создания приложений, от проверки концепции до массового производства. Раньше (знаете, несколько месяцев назад) добавление..

    Создайте API с помощью Python FastAPI
    Создание API с помощью Python становится очень простым при использовании пакета FastAPI. После установки и импорта вы можете создать приложение FastAPI и указать несколько конечных точек. Каждой..

    Веселье с прокси-сервером JavaScript
    Прокси-серверы JavaScript — это чистый сахар, если вы хотите создать некоторую общую логику в своих приложениях, чтобы облегчить себе жизнь. Вот один пример: Связь клиент-сервер Мы..

    Получить бесплатный хостинг для разработчиков | Разместите свой сайт за несколько шагов 🔥
    Статические веб-сайты — это веб-страницы с фиксированным содержанием и его постоянным содержанием. Но теперь статические сайты также обрабатывают динамические данные с помощью API и запросов...