How do to make edits on a webpage that change display on another webpage
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.
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:
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:
<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:
$(document).ready(function() {
$(".preview").on('keyup', function() {
$($(this).data('copy')).html($(this).val());
});
});
Text code 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>
1 answers
solution1
1 ACCPTED 2020-03-25 15:17:10
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.