Display the image right after upload

Vote count:

0

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:

$(document).ready(function() { 
    var options = { 
            target:   '#output',   // target element(s) to be updated with server response 
            beforeSubmit:  beforeSubmit,  // pre-submit callback 
            success:       afterSuccess,  // post-submit callback 
            resetForm: true        // reset the form after successful submit 
        }; 

     $('#MyUploadForm').submit(function() { 
            $(this).ajaxSubmit(options); 
            // always return false to prevent standard browser submit and page navigation 
            return false; 
        }); 
});

function afterSuccess(data)
{

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

    }
}

function readPath(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function (e) {
            $('#imgsrc').attr('src', e.target.result);
        }
        reader.readAsDataURL(input.files[0]);
    }
}

The image is uploaded through "upload.php" which works fine and returns the correct filename and path.

asked 49 secs ago

user3452721

46