Replace image with javascript - php

Question

I'm very new to coding on the web and I'm trying to make something work.
I'm trying to make a little webpage with an easy function to replace an existing image on the page with an image that the users chooses from his own computer. All of this is expected to be done offline. I have however, no idea how..
How do I tackle this?
p.s. With offline I mean, I am expected that this can be done locally without uploading to a server or anything. I am supposed to put this little page on a usb stick so it can be used as a little tool.

Answer 1

Well. you will need to implement file upload functionaility.
you could uses http://www.uploadify.com/
if so then you would use the onUploadSuccess method, to change the image.
when you say offline? do u mean no internet connection, or will the webpage live on a server like a intranet?
............Just to add to my own answer ........
OK, So you need it on a USB. why not install a standalone Server on the USB that way you can run PHP.
http://www.server2go-web.de/index.html
http://www.uwamp.com/en/
$("#file_upload").uploadify({
height : 30,
width : 120,
swf : 'include/fileuploader/uploadify.swf',
uploader : 'include/fileuploader/uploadify.php',
'onUploadSuccess' : function(file, data, response) {
console.log('The file was saved to: ' + data);
$("#img-preview").html("<img src='"+data+"' />");
}
});

Answer 2

I thought I'd show a code example, as this is the idea of StackOverflow. I hope it illustrates how this thing works.
Instead of relying on a set of plugins and libraries you will find out that it is perhaps even easier with native javascript. You can add jQuery to the mix for event handling, etc if you want, it is pretty much standard in the web-dev toolkit anyway.
HTML
First lets add the html for the input and a placeholder img element. You could of course dynamically add the img file with jQuery or native js.
<input id='ourfile' type='file' />
<!-- The image placeholder for our preview -->
<img id='preview' src='' />
Javascript
// Lets cache our two elements of interest.
ourfile = document.getElementById('ourfile');
preview = document.getElementById('preview');
// Create an instance of the 'native' FileReader.
fr = new FileReader();
// When our input triggers change (i.e. image is selected) load the file using the file reader.
ourfile.onchange = function () {
file = ourfile.files[0];
fr.readAsDataURL(file);
}
// Bind to the `onload` event of our FileReader and set the src of the image to the result (base64 of the image).
fr.onload = function(){
preview.src = fr.result;
}
Details
The link in #Akki619's answer shows about details for checking validity of the image, etc.
Fiddle
Here is a link to a working example:
http://jsfiddle.net/rUvUX/4/

Answer 3

This (readAsDataURL) is what you are looking for.
See working example here
In the example attached, you can send the base64 data of your selected image for uploading also.
OUT OF TOPIC HERE: Most of the client are looking for a mobile web app, an app to take picture from phone and send to the server. Not entirely feasible in web apps.

Answer 4

you can use the below javascript to do this:
<script>
function changeImage(newimage)
{
image = document.getElementById('oldimage');
image.src = newimage;
}
</script>