How can display the image preview before saving an image to folder using cakephp?

Hi..

I have a form for storing the details of a student In that form there is a field for uploading the student image .How can i display the image preview of a student ?

If anyone knows please help me . thanks in advance..

Jun 13 '11 #1

Subscribe Post Reply

✓ answered by omerbutt

one the way i know is javascript

Expand|Select|Wrap|Line Numbers

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

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Untitled Document</title>

<script type="text/javascript" src="../stage/js/jquery-1.4.2.min.js"></script>

<script type="text/javascript">

    function imageURL(input) {

        if (input.files && input.files[0]) {

            var reader = new FileReader();

            reader.onload = function(e) {

                $('#preview_img').attr('src', e.target.result)

                 .width('auto')

                 .height('auto');

            }

            reader.readAsDataURL(input.files[0]);

        }

    }

</script>

</head>

<body>

<input type="file" class="file" onchange="imageURL(this)" />

<img id="preview_img" style="width:auto; height:auto;" />

</body>

</html>

YOU NEED TO CHANGE THE JQUERY SRC WITH YOUR PATH

but this will not work for IE as IE shows URL differently from firefox and chrome so you need to work out to check the navigator agent to get the right path
regards,
Omer Aslam

8549

omerbutt

638

512MB

one the way i know is javascript

Expand|Select|Wrap|Line Numbers

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

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Untitled Document</title>

<script type="text/javascript" src="../stage/js/jquery-1.4.2.min.js"></script>

<script type="text/javascript">

    function imageURL(input) {

        if (input.files && input.files[0]) {

            var reader = new FileReader();

            reader.onload = function(e) {

                $('#preview_img').attr('src', e.target.result)

                 .width('auto')

                 .height('auto');

            }

            reader.readAsDataURL(input.files[0]);

        }

    }

</script>

</head>

<body>

<input type="file" class="file" onchange="imageURL(this)" />

<img id="preview_img" style="width:auto; height:auto;" />

</body>

</html>

Jun 13 '11 #2

mohan lal

hi.
thanks for your replay its working fine for me in firefox..thank you...

Jun 14 '11 #3

omerbutt

638

512MB

Please choose the best answer whenever the solution works for you , so that its helpful to others who have the same problem .
Regards,
Omer Aslma

Jun 14 '11 #4

by: Dev | last post by:

Dear Friends, I am passing the image name, size (in bytes) and imgaeformat (like jpg or bmp or pdf) through the network. I want display the image into picturebox without saving image...

C# / C Sharp

drawing image without saving to file

by: Marc Pelletier | last post by:

Hello all, I have a class which includes a method to create a chart. I want to be able to call this method from asp.net code as well as windows application code, so I have sketched it out as...

ASP.NET

Image control CACHING IMAGE

by: Suraj Joneja | last post by:

Hi All, I've an image control on my ASP.net page. This displays an image named 'Logo.jpg' in the location '~\Images'. Another application can change this image. It can select any image and...

ASP.NET

Open a folder using asp.net

by: santel_helvis | last post by:

Hi there, I wanna open the folder using asp.net. I am using anchor link to do that. But in href part how shall I give the location. Anyone plz help me out. Thanks in advance

ASP.NET

Image Preview in javascript while uploading the images

by: Kumarasamy.Mani | last post by:

Hi all, I'm having the following issue in image preview. I'm having an File Upload option in my web page, there i'm having one more option preview. When the user is uploading the image using...

Javascript

Firefox security blocking image preview script

by: loupet | last post by:

Hello all I am new here and this is my first post. I have tried several javascripts to preview an image on a web page using the "input type=file" to Browse and preview the image. Using IE...

Javascript

Determining number of files in folder using javascript

by: prashant | last post by:

hello, I am looking to determine the number of image files in a folder so that I could create a dynamic table accordingly. For this i need a method to identify the number of files in a folder. Is...

Javascript

Saving image in picbox

by: vicky87.eie | last post by:

I used a picture box to draw lines and rectangle using its graphics object in paint event. Now i need to save those lines i have drawn and print them. I need to know how to save them. I tried...

C# / C Sharp

How to save more than one image in one byte array using c#

by: anandmms | last post by:

Hello friend, my problem is to save more than one fingerprint images in one byte array and then store in database(oracle). i dont know how to solve it. But previously i had did image saving...

.NET Framework

Saving image as OLE Object

by: Sl1ver | last post by:

i've got this piece of coding. i need help with opening a picture box and then saving it as OLE Object in access DB How would i massage this code tho fit in? try { //save image to byte...

C# / C Sharp

How to turn on java script in a villaon keypad mobile phone

by: Charles Arthur | last post by:

How do i turn on java script on a villaon, callus and itel keypad mobile phone

Java

Migrating Website to Cloud - Emmanuel Katto

by: emmanuelkatto | last post by:

Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel

General

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...

Windows Server

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

by: tracyyun | last post by:

Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...

General

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...

Career Advice

Access Europe - Using VBA to create a class based on a table - Wed 1 May

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...

Microsoft Access / VBA

How can display the image preview before saving an image to folder using cakephp?

✓ answered by omerbutt

Similar topics