如何在网页上进行编辑以更改另一个网页上的显示

Question

I am trying to create two webpages.我正在尝试创建两个网页。 One that works as a customization page where I can upload images to the customize page and they display on the display page, and where I can type input on the customization page and it will display in a specific area on the display page.一个用作自定义页面，我可以将图像上传到自定义页面并显示在显示页面上，并且我可以在自定义页面上键入输入，它将显示在显示页面上的特定区域。 Can this be done via css and html and if so how would I go about this.这可以通过 css 和 html 来完成，如果是这样，我将如何处理。

This is the code I currently have to display upload and display images, but it only uploads to the custom page so how would I connect the two so when I upload an image it uploads to the display page as well.这是我目前必须显示上传和显示图像的代码，但它只上传到自定义页面，所以我将如何连接两者，以便当我上传图像时，它也会上传到显示页面。

Images code Javascript:图片代码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 ...
}

Image code HTML:图片代码 HTML：

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

This is the code I currently have to display text, but it only uploads to the custom page so how would I connect the two so when I upload an image it uploads to the display page as well.这是我目前必须显示文本的代码，但它只上传到自定义页面，所以我如何将两者连接起来，所以当我上传图像时，它也会上传到显示页面。 Thanks!谢谢！

Text code Javascript:文本代码 Javascript：

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

Text code HTML:文本代码 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>

A simpler method I also used:我还使用了一个更简单的方法：

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

Answer 1

To set the values on the first page:要在第一页上设置值：

<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>

And to retrieve it in the other page:并在另一个页面中检索它：

<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>

Note that this is not the optimal solution as there are better techniques using a modern framework, however, this will serve you purpose given the technologies you are using.请注意，这不是最佳解决方案，因为使用现代框架有更好的技术，但是，鉴于您正在使用的技术，这将为您服务。

如何在网页上进行编辑以更改另一个网页上的显示

问题描述

1 个解决方案

解决方案1
1 已采纳 2020-03-25 15:17:10

如何在网页上进行编辑以更改另一个网页上的显示

问题描述

1 个解决方案

解决方案1 1 已采纳 2020-03-25 15:17:10

解决方案1
1 已采纳 2020-03-25 15:17:10