Display the uploaded image in another html page

Question

I want to display the image uploaded in home.html to another page named result.html.

<div class="custom-file">
                <input type="file" class="custom-file-input" name="myfile" onchange="readURL(this);">
                <label class="custom-file-label" for="customFile" name="myfile">Choose file</label>
        </div>
        <div style="text-align: center;">
        <input type="submit" class="mybtn" onclick="showInput();">
        </div>

I want to show the uploaded image with name="myfile" in the result.html page. How should i do it?

Thats not possible with client side JS alone .You need to have some backend part as well ,like node or java. — Shubham Dixit, Oct 17 '19 at 15:24
When you say 'uploaded' it means the file was sent to server and the receiving script on the server (php, asp, node, java etc.) stored it somewhere. If you have already done that then you need to forward the URL to result page. But if you have not really uploaded anything then @Shubh is correct, you cannot do this with with client-side script alone. — Nawed Khan, Oct 17 '19 at 15:38

score 0 · Answer 1 · answered Oct 17 '19 at 15:30

0

I would personally use a php upload page to upload the image and have one the page you want to show the image on have a php array for all the images that have been uploaded and foreach file with .jpg ect.. echo it in html

answered Oct 17 '19 at 15:30

Sir Charles

5
2

score 0 · Answer 2 · answered Oct 17 '19 at 15:38

Many possibilities. Depends on the scope of your application and requirements.

Option 1 - Use a database

Store the uploaded picture to a database from the first page. The database could be anything - MySql , MSSQL, etc. The second page reads the picture contents from the database.

Option 2 - Use a memory cache

You could simply store the picture in a distributed memory cache like memcached or redis.

Option 3 - Use the file system

For very trivial applications (single web server), use the local file system as a data store. I would not recommend this.

Hope this helps.

score 0 · Answer 3 · answered Oct 17 '19 at 15:44

If you want to do this without using any back-end languages or server side, yes you can!

There is a tricky way using JavaScript or jQuery:

Create a function to save an uploaded image into your project folder, and save uploaded image src in JS variable.
Create onclick function that get the image src from pre-defined variable.
Also this function will re-direct to your result.html page with the image src as parameter , like \result.html?img=SRC-FROM-FUNCTION.
On the other page, create a function to read this parameter and append an img tag with the src from the url.

However, i recommend using back-end language like PHP or C# to do this, this solution because you are using a simple static pages.

score 0 · Answer 4 · answered Oct 17 '19 at 15:50

#1 Make div inside home.html <div id="foresult"></div> and store your value inside
#2 Make result.html
#3 Make <div id="result"></div> inside result.html
#4 Use this JQuery script inside result.html to get value from home.html

    <script> 
    $(document).ready(function(){
    $('#result').load('home.html #foresult');
    });
    </script>

score 0 · Answer 5 · answered Oct 17 '19 at 15:55

Normally this would be done server side but you might be able to upload the file to local storage and then reference it on the next page. This wouldn't necessarily work in all browsers though.

Display the uploaded image in another html page

5 Answers5