2

ここにあるこの小さなスクリプトを使用して、現在アップロードされている画像を訪問者のブラウザ自体に出力するフォームがあります。画像の出力が急激すぎます。fadeinこのスクリプトを画像の div #blah にするにはどうすればよいですか。

<script>
$(document).ready(function() { 
    function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
                $('#blah').attr('src', e.target.result);
            }
            reader.readAsDataURL(input.files[0]);
        }
    }

    $("#image-one").change(function(){
        readURL(this);
    });
});
</script>

これが役立つ場合のhtmlです。前もって感謝します。

<fieldset class="images">
    <label for="image" class="label">UPLOAD IMAGE :</label>
    <input type="file" name="image-one" id="image-one" tabindex="25" required=""/>
</fieldset>

<div class="inline-image-preivew">
    <img id="blah" src="#" width="300" align="center"/>
</div>
4

2 に答える 2

0

最初にプレビュー クラスを非表示にする必要があります。

CSS

.inline-image-preivew
{
  display:none;
}

次に、readeronload で .show / .toggle jquery コマンドを使用できます。

 reader.onload = function (e) {
                    $('#blah').attr('src', e.target.result);
                    $('.inline-image-preview')fadeIn( "slow", function() {
    // Animation complete
  });

他のオプションを決定することもできます: http://api.jquery.com/show/

これはあなたが探しているものだと思います..

于 2013-10-11T10:42:33.370 に答える