Get image and save in storage

Question

I have an web page which is a profile viewing page. Here I have an blank image. On click of this image I am able to prompt browse image option. But I don't know how to save the image into storage. Here is my code:

<div class="profileImage" >
    <ul>
        <li style="margin-top:5px;">  
            .Hii  
        </li>
        <li>
            <input type="file" id="my_file" style="display: none;" />
        </li>
        <li>
            <img id="fileupload" name="filetoupload" src="../../static/img/img.png">
        </li>
    </ul>
</div>

$(document).ready(function(){
    $("#fileupload").on("click", function() {
        $("#my_file").click();
    }

I tried this below jQuery to save image but is was of no use.

$(document).ready(function(){
    $("#fileupload").on("click",function(){
        $("#my_file").click();
        userImage = document.getElementById('fileupload');
        imgData = getBase64Image(userImage);
        localStorage.setItem("imgData", imgData);
    });    
});

My requirement is I should be able to save the image from clicking add image i.e img.png in my code. I am using beego as web framework, but i will be happy if this get solved in jQuery or javascript.

Where is the above failing? What exception do you get? – Blunderfest Jun 11 '15 at 11:54 — Blunderfest, Jun 11 '15 at 11:54
no exception. And no action taking place also – vkc Jun 11 '15 at 11:55 — vkc, Jun 11 '15 at 11:55

score 0 · Accepted Answer · edited May 23 '17 at 12:05

0

jsBin demo

// https://stackoverflow.com/a/17711190/383904
function readImage() {
  if ( this.files && this.files[0] ) {
    var FR= new FileReader();
    FR.onload = function(e) {
      localStorage.setItem("imgData", event.target.result); // Send to Localstorage
    };       
    FR.readAsDataURL( this.files[0] );
  }
}

$(document).ready(function(){
  $("#fileupload").on("click",function(){
    $("#my_file").click().change( readImage );
  });   
});

To save that image on server you'll need to send that data to PHP.
PHP can than convert your base64 string to an image.

Otherwise, why not simply send that image using AJAX to a PHP script that will put it inside a server folder?

Send Image to server using File input type
https://stackoverflow.com/a/17711190/383904

edited May 23 '17 at 12:05

Community

1
1

answered Jun 11 '15 at 11:56

Roko C. Buljan

196,159
39
305
313

where can i specify my location – vkc Jun 11 '15 at 12:02
You will have to add a specific AJAX call for that, this just saves it in localStorage. – Erik Terwan Jun 11 '15 at 12:05
@vkc what you mean by *Location*? You said you want to store it in localStorage. There you go. – Roko C. Buljan Jun 11 '15 at 12:06
@vkc if you want to save that image on server, send the image directly to PHP or some other server side language via AJAX. – Roko C. Buljan Jun 11 '15 at 12:08
selected image should be stored in my local system or in server side in specified path like home/user/picture/stack – vkc Jun 11 '15 at 12:08
1

@vkc I really don't get you, If you just read an image from the users machine... why would you want now to save it elsewhere - again on the same machine? – Roko C. Buljan Jun 11 '15 at 12:12
@vkc ohh than you'll need a PHP script that will do it really easily. – Roko C. Buljan Jun 11 '15 at 12:21
@vkc also please, next time when you ask questions don't just say "sandwich" but rather "toast sandwich with beacon and mayonnaise" OK? Cause `storage` can mean lot of things. – Roko C. Buljan Jun 11 '15 at 12:25
Okay...then Shall i close this question. And post new one with specific requirement – vkc Jun 11 '15 at 12:27
@vkc you don't have to close this question since I've already answered it as-per-question-title. You can ask a new one, but first make sure to search for similar questions, be specific, and show what you tried. Happy coding – Roko C. Buljan Jun 11 '15 at 14:35

Get image and save in storage

1 Answers1