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

时间:2013-09-14 18:19:31

标签: javascript php jquery html forms

我正在尝试检测通过表单提交的图像,以便我可以继续执行更多代码。提交图像抛出一个form input type="file",然后使用jquery.form.js插件在页面中渲染抛出ajax。

我尝试了on.load方法,但它似乎只适用于文件代码中调用的图像。

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

并且:

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

我也尝试过来自https://github.com/desandro/imagesloaded的插件,但是因为我跳楼去工作而没有用。

有没有办法可以检测到提​​交图像的时间,而不是加载到页面的DOM?

更新
上传处理程序

$('.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');
    });
});

1 个答案:

答案 0 :(得分:0)

仍然有点不清楚您要求的确切内容但假设文件已成功上传并且图像标记已添加到页面上的某个容器中,您应该能够通过委派检测新图像何时加载使用选择器作为过滤器将load事件发送到容器。

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

使用委托允许处理程序同时应用于首次呈现页面时加载的图像以及稍后动态添加到页面的元素。