Member Avatar for tqmd1

Sir, I am using these codes

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>My Contacts</title>

<style type="text/css">

html {
overflow:auto;
}

body{
background-color:#e7f4fe;
}

#container {
margin: auto;
position:absolute;
background-color:#CFC;
padding:10px;
overflow:auto;
width:150px;
height:150px;
text-align:center;
border:1px solid #09F;
}

.hidden{
    display:none;
    }
</style>

     <body>

        <div id="container">

            <form action="<?php $_SERVER['PHP_SELF'] ?>" method="post" enctype="multipart/form-data">

            <img id="photo" width="100" height="100" src="http://www.w3schools.com/images/compatible_chrome.gif"     style="text-align: center;" /><br>

            <input type="file" name="file" id="file" value="PLEASE CHANGE YOUR IMAGE" class="hidden"></br>

            <a target="photo" onclick="document.getElementById('file').click();"><b>UPLOAD</b></a></br></br> 
            </form>
        </div>
    </body>
 </html>

When I press upload then this image selector appears

[IMG]

I want to show selected image in current div like shown in above image.

How it will be possible.

(I do not want to upload image in any folder or database, just want to displaly)

Please help

  • 4 Contributors
  • 3 Replies
  • 132 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by vani krishnan

Dani AI

Generated

A quick, reliable approach is to preview the selected image on the client without uploading it by using the browser File API. Two simple options work well: create an object URL with URL.createObjectURL(file) (fast, low memory) or read a base64 data URL with FileReader.readAsDataURL(file) (widely supported). pointed to a demo that follows this idea, linked styling tips, and ’s suggestion to set innerHTML won’t work because a File is not HTML — you need to convert it to a URL or data string and assign it to an img.src.

Example using object URL (recommended for large files; remember to revoke):

const fileInput = document.getElementById('fileInput');
const preview = document.getElementById('previewImg');

fileInput.addEventListener('change', function () {
  const file = this.files && this.files[0];
  if (!file || !file.type.startsWith('image/')) return;
  const blobUrl = URL.createObjectURL(file);
  preview.src = blobUrl;
  preview.onload = () => URL.revokeObjectURL(blobUrl);
});

Alternative using FileReader (produces a base64 data URL):

fileInput.addEventListener('change', function () {
  const file = this.files && this.files[0];
  if (!file || !file.type.startsWith('image/')) return;
  const reader = new FileReader();
  reader.onload = e => preview.src = e.target.result;
  reader.readAsDataURL(file);
});

Quick tips: add accept="image/*" on the file input, validate file.type and file.size before preview, use a <label for="..."> to trigger the chooser for better accessibility, and style the preview with max-width:100%; height:auto; or object-fit so it fits the div. For compatibility and details see the FileReader API and URL.createObjectURL on MDN.

Recommended Answers

All 3 Replies

Member Avatar for JorgeM

There's a working demo here on jsfiddle that you can take a look at and adapt to your needs. This allows you to display without actually uploading.

http://jsfiddle.net/LvsYc/

Member Avatar for vani krishnan

You can include a javascript function to it.

inside the function, give

document.getElementById('Id_of_div_whr_u_want2_display_the_img').innerHTML= file;
(ie, the img u hav selected)
Edited by vani krishnan
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.