I have been searching for 2 days on "how to preview an image before upload". I see online live demo and copy past all code as it was. I rename my class name to match the additional js code. My code is:
$('#edit-image-upload-wrapper').prepend('<div id="imagePreview"></div>');
$(function() {
$("#edit-image-upload-wrapper").bind("change", function()
{
// alert("it works");
var files = !!this.files ? this.files : [];
if (!files.length || !window.FileReader) alert("no file selected");//return; // no file selected, or no FileReader support
if (/^image/.test( files[0].type)){ // only image file
var reader = new FileReader(); // instance of the FileReader
reader.readAsDataURL(files[0]); // read the local file
reader.onloadend = function(){ // set image data as background of div
$("#imagePreview").css("background-image", "url("+this.result+")");
}
}
});
});
I inspect my html dom and see the following code :
<div class="form-item" id="edit-image-upload-wrapper"><div id="imagePreview"></div>
<label for="edit-image-upload">Upload Your Picture: <span class="form-required" title="This field is required.">*</span></label>
<input type="file" name="files[image_upload]" class="form-file required" id="edit-image-upload" size="60">
<div class="description"><p>You need to provide a passport sized image in jpg/jpeg or png format. The image size has to be 100kb or lower.</p>
</div>
</div>
Which is exactly same as this demo: http://www.phpgang.com/how-to-show-image-thumbnail-before-upload-with-jquery_573.html
But when I change the image , alert("no file selected"); works that proves no file selected. What am I doing wrong. please help.
