Обновление SRC тега изображения в HTML после загрузки изображения PHP - PullRequest
Новая
       2

Обновление SRC тега изображения в HTML после загрузки изображения PHP

0 голосов
/ 26 октября 2019

Итак, мне удалось создать XMLHttpRequest загрузку изображений. После завершения загрузки я бы хотел обновить <image src=""> в html, чтобы отразить изменения.

Я делаю это в html: 

<img id="profileImg" <?php echo 'src="'.$profileURL.'"'; ?> >

.. когдазагружается новая картинка Я отправляю XMLHttpRequest для обновления базы данных и файловой системы соответственно;используемый php выглядит следующим образом: 

<?php

// getting stuff from XMLHttpRequest

if(move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_file)) {

    // saving new file url ($target_file) into db        
    // on page refesh $profileURL would be equal to $target_file

    ?>
    <script>
        window.onload = function () {
            document.getElementById("profileImg").src = "<?php echo $target_file ?>";
        }
    </script>
    <?php
}
?>

Я думал, что, вложив javascript в мой php-файл, он обновит src для тега imgae также. Однако это не такработа.

Кто-нибудь знает, что я здесь не так делаю?

1 Ответ

1 голос
/ 26 октября 2019

Очень простой полный пример того, как можно использовать XMLHttpRequest для загрузки изображения, а затем использовать функцию обратного вызова ajax для управления DOM - в этом случае, чтобы установить атрибут источника изображения и, таким образом, отобразить изображение. 

<?php
    if( $_SERVER['REQUEST_METHOD']=='POST' ){

        if( !empty( $_FILES['fileToUpload'] ) ){

            $obj=(object)$_FILES['fileToUpload'];
            $tmp=$obj->tmp_name;
            $name=$obj->name;

            $filename = sprintf('upload__%s', $name );

            file_put_contents( sprintf( '%s/%s', __DIR__, $filename ), file_get_contents( $tmp ) );

            header('Content-Type: text/plain');
            http_response_code(200);

            exit( $filename );
        }


        http_response_code(404);
        exit(false);
    }
?>
<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8' />
        <script>
            document.addEventListener('DOMContentLoaded',e=>{
                const ajax=function(url,params,callback){
                    let xhr=new XMLHttpRequest();
                    xhr.onload=function(){
                        if( this.status==200 && this.readyState==4 )callback.call( this, this.response )
                    };
                    xhr.open( 'POST', url, true );
                    xhr.setRequestHeader('X-Requested-With','XMLHttpRequest');
                    xhr.send( params );
                };

                const ajaxcallback=function(r){
                    document.querySelector('form img').src=r
                }

                const filehandler=function(e){
                    ajax( location.href, new FormData( e.target.parentNode ), ajaxcallback  )
                };

                document.querySelector('[type="file"]').addEventListener('change', filehandler );
            });
        </script>
        <style>

        </style>
    </head>
    <body>
        <form>
            <input type='file' name='fileToUpload' />
            <img src='' />
        </form>
    </body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...