Как сделать изменения на веб-странице, которые изменяют отображение на другой веб-странице - PullRequest
Новая
       0

Как сделать изменения на веб-странице, которые изменяют отображение на другой веб-странице

1 голос
/ 25 марта 2020

Я пытаюсь создать две веб-страницы. Тот, который работает как страница настройки, где я могу загружать изображения на страницу настройки, и они отображаются на странице дисплея, и где я могу ввести ввод на странице настройки, и она будет отображаться в определенной области c на странице дисплея. Можно ли это сделать через css и html, и если да, то как бы я go об этом.

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

Код изображения Javascript: 

window.addEventListener('load', function() {
  document.querySelector('input[type="file"]').addEventListener('change', function() {
      if (this.files && this.files[0]) {
          var img = document.querySelector('img');  // $('img')[0]
          img.src = URL.createObjectURL(this.files[0]); // set src to blob url
          img.onload = imageIsLoaded;
      }
  });
});

function imageIsLoaded() { 
  alert(this.src);  // blob url
  // update width and height ...
}

Код изображения HTML: 

<input type='file' />
<br><img id="myImg" src="#" alt="your image" height=200 width=100>

Это код, который в настоящее время требуется для отображения текста, но он только загружает на пользовательскую страницу, так как мне соединить их, чтобы при загрузке изображения оно также загружалось на страницу отображения. Спасибо!

Текстовый код Javascript: 

$(document).ready(function() {
  $(".preview").on('keyup', function() {
    $($(this).data('copy')).html($(this).val());
  });
});

Текстовый код HTML: 

<div class="field">
  <label class="paddingleft" for="fullname">Full Name</label>
  <div class="center">
    <input type="text" class="biginputbarinline preview" id="ShipToFullname" data-copy="#name" name="ShipToFullname" required>
  </div>
</div>

<br>

Your name is:
<div id="name"></div>

Более простой метод, который я также использовал: 

 <input onkeyup="$('#name').html(this.value)" ... />
 <p id='name'></p>

1 Ответ

1 голос
/ 25 марта 2020

Чтобы установить значения на первой странице: 

<body>
     <input type='file' />
     <br><img id="myImg" src="#" alt="your image" height=200 width=100>
     <input type='text' id="text" placeholder="Enter text"/>
     <button id="submitBtn">Submit</button>
</body>
<script>
     window.addEventListener('load', function() {
          document.querySelector('input[type="file"]').addEventListener('change', function() {
               if (this.files && this.files[0]) {
                    var reader = new FileReader();
                    var baseString;
                    reader.onloadend = function () {
                         baseString = reader.result;
                         console.log(baseString); 
                         localStorage.setItem('image',baseString)
                         document.getElementById("myImg").setAttribute('src',localStorage.getItem("image"));
                    };
                    reader.readAsDataURL(this.files[0]);
               }
          });
          document.getElementById('submitBtn').addEventListener('click', function(){
               var text = document.getElementById('text').value;
               console.log(text)
               if(!text)
                    alert("Please enter input");
               else
                    localStorage.setItem('text',text);
          });
     });
</script>

И чтобы получить его на другой странице: 

<body>
     <img src="" id="image"/>
     <img src="" id="image1"/>
     <p id="text"></p>
</body>
<script>
     window.onload = function(){
               if(localStorage.getItem("image")){
                    document.getElementById("image").setAttribute('src',localStorage.getItem("image"));
                    document.getElementById("image1").setAttribute('src',localStorage.getItem("image"));
               }
               if(localStorage.getItem("text"))
                    document.getElementById('text').innerHTML = localStorage.getItem("text");
     }
</script>

Обратите внимание, что это не оптимальное решение, так как есть более совершенные методы с использованием современной среды, однако, это поможет вам с учетом технологий, которые вы используете.

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

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

...