0

我正在尝试一些事情on.change发生后。
我正在提交此图像，.on('change', function(){})并且在图像在浏览器中完全呈现后我需要运行一些代码。

到目前为止，我有这个： 

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

我已经尝试过了，但它在图像甚至开始渲染之前执行了 onde 的所有行：

$('.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('');
            n();
    });
    /////////////////////////////
    alert($(this).closest('.child').html());
    /////////////////////////////
});

我正在寻找的是这样的：

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

}).[[afterComplete]](function(){
    alert($(this).closest('.child').html());
});

HTML [带有input type file]的页面

<div class="child" style="z-index: 70; position: absolute; top: 0px; left: 0px; width: 800px; height: 172px; cursor: default; background-color: rgba(254, 202, 64, 0.701961);" alt="reset">
   <div class="fileinput-holder" style="position: relative;"><input type="text" class="fileinput-preview" style="width: 100%; padding-right: 81px;" readonly="readonly" placeholder="No file selected...">
      <span class="fileinput-btn btn" type="button" style="display:block; overflow: hidden; position: absolute; top: 0; right: 0; cursor: pointer;">Browse...<input type="file" class="photoimg" name="photoimg" style="position: absolute; top: 0px; right: 0px; margin: 0px; cursor: pointer; font-size: 999px; opacity: 0; z-index: 999;"></span>
   </div>
</div>

PHP [处理输入的文件]

...
if(move_uploaded_file($tmp, $path.$actual_image_name)) //check the path if it is fine
    {
        move_uploaded_file($tmp, $path.$actual_image_name); //move the file to the folder
        //display the image after successfully upload
        echo "<div class=\"imgh\" style=\"width:auto; height:auto;\" alt=\"reset3\"><img src='data:image/".$ext.";base64,".base64_encode(file_get_contents($path.$actual_image_name))."' style=\"width:inherit; height:inherit;  min-width:50px; min-height:50px;\" class='img_set'><div class=\"close\"><i class=\"icon-remove-sign\"></i></div></div>";
    }
else
    {
    echo "<input type='file' class='photoimg' name='photoimg'/><br/><strong style='color:red;'>Carregamento Falhou!</strong>";
    }
}
...
4

1 回答 1

0

保留输入表单的更改处理程序以处理其更改，但使用图像的加载事件，并使用它来处理需要在图像加载后执行的代码：

$('img.img_set').on('load', function (){
  //...
});

这并不总是可靠的，因为如果图像已被缓存，它可能不会触发。

请参阅：图像加载时的 jQuery 回调（即使图像被缓存）

于 2013-09-14T16:11:48.257 回答