jQuery通过表单输入type =“ file”提交后检测插入的图像

Question

I'm trying to detect an image submited through a form so I can proceed with the execution of some more code. The image is submited throw a form input type="file" and than rendered in the page throw ajax using jquery.form.js plugin.

I've tryed the on.load method but it seems to only work with images called in the file code.

$('.img_set').on('loaded', function (){
    alert();
});

And:

$(".img_set").on('load', function() {
  alert('I loaded!');
}).each(function() {
  if(this.complete) $(this).load();
});

I've also tryed the plugin from https://github.com/desandro/imagesloaded but didn't work as I was hopping to work.

Is there a way to have something that can detect when a image is submitted, than loaded to the DOM of the page?

UPDATE
upload handler

$('.photoimg').on('change', function (){
    $('.db_result').html('<img src="images/loader.gif" />'); 
    $('.imageform').ajaxForm({ target: $(this).closest('.child')}).submit();
    $('.db_result').delay(500).queue(function(n) {
            $(this).html('');
    });
    $('.child').on('load','.img_set', function() {
        alert('new image loaded');
    });
});

Answer 1

It's still somewhat unclear exactly what you're asking for but assuming that the file is successfully uploaded and an image tag is added to some container on the page, you should be able to detect when the new image has been loaded by delegating the load event to the container using the selector as a filter.

$('#img_container').on('load','.img_set', function() {
    alert('new image loaded');
});

Using delegation allows the handler to apply both to images loaded when the page is first rendered and elements that are dynamically added to the page later.