Reloading/refreshing a div on click with jquery

**qwikad.com** · 01-12-2014, 05:42 PM

Hi. I am working on an image uploader and was wondering if you can help me.

Please, go to this page: http://qwikad.com/test.php?view=post...hortcutregion=

and select an image with any Choose File selector. You should see a thumbnail preview. Now click on the x to remove the image and clear the input file.

Now, if you're going to select an image with that input file again the thumbnail preview will not load up (because the old thumb is still there closed).

Is there a way to reload this particular div to clear it from the old thumb and get the function ready again?

The thumb previews are uploaded with this:

Code:

(function( $ ){
  var settings = {
  		'scale': 'contain', // cover
  		'prefix': 'prev_',
		'types': ['image/gif', 'image/png', 'image/jpeg'],
		'mime': {'jpe': 'image/jpeg', 'jpeg': 'image/jpeg', 'jpg': 'image/jpeg', 'gif': 'image/gif', 'png': 'image/png', 'x-png': 'image/png', 'tif': 'image/tiff', 'tiff': 'image/tiff'}
	};

  var methods = {
     init : function( options ) {
		settings = $.extend(settings, options);
		
		return this.each(function(){
			$(this).bind('change', methods.change);
			$('#'+settings['prefix']+this.id).html('').addClass(settings['prefix']+'container');
		});
     },
     destroy : function( ) {
		return this.each(function(){
			$(this).unbind('change');
		})
     },
     change : function(event) { 
     	var id = this.id
     	
     	$('#'+settings['prefix']+id).html('');
     	
     	if(window.FileReader){
     		for(i=0; i<this.files.length; i++){
		 		if(!$.inArray(this.files[i].type, settings['types']) == -1){
		 			window.alert("File of not allowed type");	
		 			return false
		 		}
		 	}
     	
     	    for(i=0; i<this.files.length; i++){
     	    	var reader = new FileReader();
	    		reader.onload = function (e) {
	    			$('<div />').css({'background-image': ('url('+e.target.result+')'), 'background-repeat': 'no-repeat', 'background-size': settings['scale'] }).addClass(settings['prefix']+'thumb').appendTo($('#'+settings['prefix']+id));
	    		};
	    		reader.readAsDataURL(this.files[i]);
     	    }

     	}
     }
  };

  $.fn.preimage = function( method ) {
    if ( methods[method] ) {
		return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
    } else if ( typeof method === 'object' || ! method ) {
		return methods.init.apply( this, arguments );
    } else {
		$.error( 'Method ' +  method + ' does not exist on jQuery.preimage' );
    }    
  
  };

})( jQuery );

and this:

Code:

$(document).ready(function()
{
	$('.file').preimage();
});

Here's what I use to close a thumbnail preview:

Code:

$(function() {
    $('a.close').click(function() {
        $($(this).attr('href')).slideUp();
        return false;
    });
});

The html part:

Code:

<div id="prev_file1"></div>
<a href="#prev_file1" class="close" >x</a>

Thank you.

**qwikad.com** · 01-13-2014, 05:16 PM

I tried to reload the entire div with this:

Code:

<script>
$(document).ready(function()
{

$('#changePanel').click(function() {
    var data = '<input class="file" id="file1" name="pic[]" type="file"><div id="prev_file1"></div>' ;
    $('#panel').hide().html(data).fadeIn('fast');
});
});
</script>


<div id="panel">

<input class="file" id="file1" name="pic[]" type="file"><div id="prev_file1"></div>

</div>

<input id="changePanel" value="x" type="button" >

It reloads it, but the preview option quits working after that. You'd think it shouldn't.