Question

在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();
    });
});

我已经尝试了这个但是它会在图像执行之前执行所有的行甚至是beggins渲染：

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

Answer 1

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

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

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

请参阅：jQuery callback on image load (even when the image is cached)

发生'on.change'之后的Jquery'do'代码

1 个答案: