时间戳

首页 > 解决方案 > 如何在网页上进行编辑以更改另一个网页上的显示

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

问题描述

我正在尝试创建两个网页。一个用作自定义页面，我可以将图像上传到自定义页面并显示在显示页面上，并且我可以在自定义页面上键入输入，它将显示在显示页面的特定区域中。这可以通过 css 和 html 完成吗？如果可以，我将如何处理。

这是我目前必须显示上传和显示图像的代码，但它只上传到自定义页面，所以我将如何连接两者，所以当我上传图像时它也会上传到显示页面。

图片代码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>

标签： javascripthtmlcss

解决方案

要在第一页上设置值：

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

请注意，这不是最佳解决方案，因为使用现代框架有更好的技术，但是，鉴于您使用的技术，这将为您服务。

推荐阅读