Showing uploaded image after successful upload

Question

I am using the Carrierwave gem inside of Magnific Popup (lightbox). What I want to do is that after uploading a image that it will show the newly uploaded i

Answer 1

Personally i would prefer to use http://blueimp.github.io/jQuery-File-Upload/

• complicated tasks like stop upload request.
• uploads with browsers without XHR file uploads
• async upload

It also has documentation https://github.com/blueimp/jQuery-File-Upload/wiki/API

---

If you want to do it yourself send json back with the image url.

var imageurl = "";
$('#inputValue').attr("src", imageurl);

For example i bind input value to url

$('#inputName').bind('input',function(){ 
   $('#inputValue').attr("src", $(this).val());
});

Demo http://jsfiddle.net/margusmartsepp/83w51u85/

Answer 2

you are doing this very complicatedly..

this is the simple solution.Write javascript function to send the selected image using ajax.

<script>
   var client = new XMLHttpRequest();  
   function upload_banner() 
   {
        var file = document.getElementById("file");
        var formdata = new FormData();
        formdata.append("file", file.files[0]);
        var files=document.getElementById('file').files;
        var file_name=files[0].name;
        //alert(file_name);
        var file_extension=file_extension_get(file_name);

        if( file_extension == "jpg" || file_extension == "JPG" || file_extension == "jpeg" || file_extension == "JPEG" || file_extension == "gif" || file_extension == "GIF" || file_extension == "png" || file_extension == "PNG" )
        {
            client.open("post", "small_img.php", true);
            client.send(formdata);  /* Send to server */    

        }
        else
        {
            alert("Wrong file format");
        }
    }
   /* Check the response status */  
   client.onreadystatechange = function() 
   {
    alert(client.readyState+"sssss"+client.status);
      if (client.readyState == 4 && client.status == 200) 
      {

         var m=client.responseText.toString();

          $("#upload_img_view").html(m);
  upload_id();

        }
   }   
   function file_extension_get(file)
   {
        return (/[.]/.exec(file)) ? /[^.]+$/.exec(file.toLowerCase()) : '';
    }

function upload_id()
    {

        var uploadid=document.getElementById('upload_id').value;
        $("#banner_id").val(uploadid);
        return true;
    }

</script>

++++++++++++++++++++++++++++++++++++++++++++++++++++

In Html file write the below code to upload the file..

<input type="file" id="file"  name="file" onchange="upload_banner()" required name="file_create_video">             <br>

<div class="uplod-img" id="upload_img_view">

++++++++++++++++++++++++++++++++++++++++++++++++++

in php file use the below code small_img.php

$path = "/var/www/upload/profile_pic/";

if(move_uploaded_file($tmp, $path.$actual_image_name))
{
echo "<img src='$u' height='100%' width='100%'> <input type='hidden' id='upload_id' name='upload_id' value='$k' >";
}

this works for me...try it.. make some changes according to your code