Как я могу отобразить фотографию, выбранную через ввод HTML в div? - PullRequest
Новая
       1

Как я могу отобразить фотографию, выбранную через ввод HTML в div?

0 голосов
/ 09 ноября 2019

То, что я пытаюсь сделать, - это сделать фотографию из папки и использовать ее для отображения на странице. Я перепробовал много решений, которые обнаружил по всему интернету, и ни одно из них не сработалоЭто даже выполнимо с голыми HTML, CSS и JS? Прошу прощения, если это глупый вопрос, я только начинающий, когда дело доходит до веб-разработки.

Вот мой код: 

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="styleTake2.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
        <script>
            function getImage(input){
                if(input.files && input.files[0]){
                    var reader = new FileReader();

                    reader.onload = function (e) {
                        $('#placeholder')
                            .attr('src', e.target.result)
                            .width(150)
                            .height(200);
                    };
                }

                reader.readAsDataURL(input.files[0]);
            }
        </script>
    </head>
    <header>
        <img src="assets/logo.png" class="logo">
        <ul class="top-bar"> 
            <li class="top-button">
                <i class="fa fa-upload"></i> 
                <input id="uploadFile" type="file" onchange="readURL(this);" />
            </li>
            <li class="top-button">
                <i class="fa fa-save"></i>
                <button id="btnSave">Save image</button>
            </li>
        </ul>
    </header>
    <body>
        <ul class="side-bar">
            <hr width="199px" style="margin-top:0px;">
            <li class="side-button">
                <i class="fa fa-magic"></i> Effects
            </li>
            <hr width="199px">
            <li class="side-button">
                <i class="fa fa-volume-off"></i> Sounds
            </li>
            <hr width="199px">
            <li class="side-button">
                <i class="fa fa-image"></i> Select background
            </li>
            <hr width="199px">
        </ul>
        <img id="placeholder" src="#" alt="asdf" />
    </body>
</html>

Я не фанат копирования-вставлять код, поэтому я хотел бы понять, что происходит

1 Ответ

0 голосов
/ 09 ноября 2019

С программой чтения файлов:

HTML 

<input type='file' onchange="readURL(this);" />
<img id="blah" src="http://placehold.it/180" alt="your image" />

CSS 

img{
  max-width:180px;
}
input[type=file]{
padding:10px;
background:#2d2d2d;}

JS 

function readURL(input) {
            if (input.files && input.files[0]) {
                const reader = new FileReader();

                reader.onload = function (e) {
document.querySelector('#blah').setAttribute('src',e.target.result )

                };

                reader.readAsDataURL(input.files[0]);
            }
        }

Вот пример накодовый блок для него .

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...