Блог

Главная - Вопросы по программированию - Проблема с ajax

Проблема с ajax

#javascript #php #html #ajax

#javascript #php #HTML #ajax

Вопрос:

Мне нужна помощь с моим проектом, я должен создать зону перетаскивания, и, когда изображение будет удалено, оно должно быть сохранено на сервере (через PHP, что мне удалось), но также появиться в HTML благодаря ответу от AJAX через PHP. Я больше не знаю, что делать, вот несколько ошибок в коде. Каждый раз, когда я вижу предупреждение JS, объявляется: «Создается исключение: не определено». Я не использую Jquery или что-то еще, это просто ванильный PHP и Javascript, спасибо за вашу помощь

Извините за мой плохой английский, я француз 🙂

мой код :

 <body onload="init()" >
<div id="drop_file_zone" ondrop="upload_file(event)" ondragover="return false">
    <div id="drag_upload_file">
        <p>Drop file here</p>
        <p>or</p>
        <p><input type="button" value="Select File" onclick="file_explorer();"></p>
        <input type="file" id="selectfile">
        
        
    </div>
</div> <br>
<img id = "imageSource" src="uploads/"/>
 

<script type="text/javascript">
    var fileobj;
    
    var url = "ajax.php";
    


    function upload_file(event) {
       event.preventDefault();
       var target = document.getElementById ("drop_file_zone");

            for (var i = 0; i < 1; i  ) {
              var fileobj = event.dataTransfer.files[i];
              ajax_file_upload(fileobj);
            }}
            
     function file_explorer() {
         document.getElementById('selectfile').click();
         document.getElementById('selectfile').onchange = function() {
             fileobj = document.getElementById('selectfile').files[0];
             ajax_file_upload(fileobj);
         };
     }

     function init() {
        request = new XMLHttpRequest();
        var x = document.getElementById("imageSource");
    }

    function prepareData() {

        let url = "ajax.php";
        makeRequest( url, fileobj );
    }

     function ajax_file_upload(file_obj) {
        
             request.onreadystatechange = alertContents;
             var formData = new FormData();
             formData.append('file', file_obj);
             request.open('POST', url)
             request.send(formData)
      
            }

            
    function alertContents() {
        try {
            if (request.readyState === XMLHttpRequest.DONE) {
                if (request.status === 200) {

                    var reponse = JSON.parse( request.reponseText);
                    x.setAttribute("src", 'uploads'   reponse.text);
                   
                   //document.getElementById("imageSource").src = reponse.text;
                } else {
                    alert("Un problème est survenu au cours de la requête.");
            }
        }
        }
        catch( e ) {
            alert("Une exception s’est produite : "   event.description);
        }
    }

        
     
</script>
</body>
</html>

И мой PHP

 <?php

move_uploaded_file($_FILES[‘file’][‘tmp_name’], ‘загружает /’. $_FILES[‘файл’][‘имя’]);

$test = ‘{ «text»:»uploads/’.$_FILES[‘file’][‘name’].'»}’; echo $_FILES[‘file’][‘name’] ;

Комментарии:

1. Что такое request ? Не используйте глобальные переменные.

2. запрос = новый XMLHttpRequest();

3. Конечно, внутри init() функции это XMLHttpRequest . Но не где-либо еще. Переменные должны передаваться из функции в функцию. Если вы хотите полагаться на глобальные переменные, чего делать не следует, вам необходимо создать их в глобальной области видимости перед их использованием.