display image preview

Question

i want to display image after it upload

i write following code but it did't work

  onFileSuccess: function(file, response) {
  var json = new Hash(JSON.decode(response, true) || {});

  if (json.get('status') == '1') {
   file.element.addClass('file-success');
  } else {
   file.element.addClass('file-failed');

  }
 })

and li is

         <li class="file file-success">
         </li>

the file-success class is

     #img-list li.file.file-success {
background-image: url(uploading/assets/uploaded.png);
     }

and my php return image name after uploading like this

       $info1='../uploads/' . $newfilename; 
       $return['fpath'] = $info1;

in place of uploaded.png i want to show image with is return by php in

      $return['fpath'] = $info1; statement

Thanks

Answer 1

Can you be more specific about what didn't work?

Is file.element a jQuery object or a plain DOM element? Perhaps you need to jQuerify it:

$(file.element).addClass('file-success');

Answer 2

I don't know how you have your elements set up, or what the json looks like, but it might be better to append the image itself to the <li> rather than setting it as a background.

onFileSuccess: function(file, response) {
                var json = new Hash(JSON.decode(response, true) || {});

                if (json.get('status') == '1') {
                        file.element.addClass('file-success');
                        file.element.append('<img src="' + json.get('filename') + '">'); 
                } else {
                        file.element.addClass('file-failed');

                }
        })