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

入力フォームの変更ハンドラーを保持して変更を処理しますが、画像の load イベントを使用し、それを使用して、画像が読み込まれた後に実行する必要があるコードを処理します。

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

画像がキャッシュされている場合は起動しない可能性があるため、これは常に信頼できるとは限りません。

参照:画像読み込み時の jQuery コールバック (画像がキャッシュされている場合でも)

于 2013-09-14T16:11:48.257 に答える