Display the image right after upload

Question

I want to display the image right after uploading it. For this I added the function $('#imageInput').on('change', function()) in the .success() function of ajax but it does not work. alert("good") pops "good" but alert("better") does not pop "better".

Any ideas how to achieve this?

JS:

function afterSuccess(data)
{

    if(data.indexOf('error')<0)
    {  alert ("good");
      $('#imageInput').on('change', function() {
            alert ("better");
            readPath(this);
            });  

    }
}

That's because you only create an event handler - you never fire it off. — tymeJV, Jun 02 '14 at 18:41

bwright · Answer 1 · 2014-06-02T18:59:15.563

2

The $('#imageInput').on('change', function() {...}); event does not fire because the upload field changes when the file is selected (pre-upload). The field does not change when the file is uploaded.

Update: In regards to your follow up question (see comments below), consider something like this, where the data array may vary depending on what is returned by your php script, and the insertion method may vary depending on your HTML layout (in this case, I assume that there is a element you would be inserting the into:

function afterSuccess(data)
{
  if(data.indexOf('error')<0)
   {
          var filepath = data['filepath'];
          $("#imageContainer").html("<img src="+filepath+"/>");
   } else {
       alert('Sorry, but an error occurred while uploading the image. Please try again');
   }
}

edited Jun 02 '14 at 18:59

answered Jun 02 '14 at 18:43

bwright

347
1
15

So what should I do to display the image right after upload? – user3452721 Jun 02 '14 at 18:48
Assuming that the `data` var contains the filename, you could use jQuery to insert an image element into the page body. There are a lot of methods you can use to do the insert (depending on your page structure), but one example is: http://stackoverflow.com/questions/941206/jquery-add-image-inside-of-div-tag – bwright Jun 02 '14 at 18:54
Cant I simply reload that div "#imageContainer"? If so, then how?(I am asking this because I do not want to return the filepath from upload.php for security reasons) – user3452721 Jun 02 '14 at 19:21
I am not sure I understand your question. If you need to display the image file, passing the filepath (URL) of the image to the `` element is required. Can you clarify what you do and don't want to do here? – bwright Jun 02 '14 at 19:50
The image.jpg gets updated on uploading the file(different image with same name is uploaded).Now I want to reload that div. – user3452721 Jun 02 '14 at 20:36
I would recommend reading up on how to handle AJAX calls. The jQuery API page for the ajax method is located here: http://api.jquery.com/jQuery.ajax/, and another helpful page here: http://code.tutsplus.com/tutorials/5-ways-to-make-ajax-calls-with-jquery--net-6289 – bwright Jun 03 '14 at 16:19

score 0 · Answer 2 · answered Jun 02 '14 at 18:54

0

if the filename and path are returned properly, maybe this will work to display it?:

function afterSuccess(data)
{
  if(data.indexOf('error')<0)
    {  
          $("#desiredDiv").html("<img src="+path+"/>");
    }
}

answered Jun 02 '14 at 18:54

Sam Creamer

5,187
13
34
49

Display the image right after upload

2 Answers2