2

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.

6
  • What do you mean by "all of this is expected to be done offline"? Commented Aug 20, 2013 at 9:50
  • what did you tried that did not work? Commented Aug 20, 2013 at 9:51
  • It's best to put a code snippet of how far you have managed to solve this issue. But, it's pretty simple, just replace the url in the src attribute in the img tag with the provided url from file. Commented Aug 20, 2013 at 9:56
  • try html5 offline !!!! Commented Aug 20, 2013 at 9:58
  • You can use the jQuery .attr() selector to change the src attribute of a HTML img element, but without any extra information about what you are trying to do and why, it's difficult to suggest anything further. Commented Aug 20, 2013 at 10:01

4 Answers 4

4

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+"' />");

            }
});
Sign up to request clarification or add additional context in comments.

2 Comments

This is not the answer. You can do this perfectly fine using native JS.
@Mosselman - it is the answer. It gives the guidelines, shows how to obtain information and provides an example on how it's done which is exactly what was asked for. +1 for having brains among the whole lot of commenters here. Naturally, this can be done with native JS, and the plugin mentioned here shows how to do it in it's source.
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/

Comments

1

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.

Comments

0

you can use the below javascript to do this:

<script>

  function changeImage(newimage)
   {
    image = document.getElementById('oldimage');
    image.src = newimage;
   }

</script>

1 Comment

This doesn't help. OP wants to replace image with file uploaded from local computer, so a file upload is required.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.