0

jQueryで「ライブ」画像プレビューを作成しようとしていますが、今のところアイデアしかありません。したがって、div(100px/100px) と入力フォームを用意し、そこにリンクを配置して、div で 100px/100px に「縮小」された画像を視覚化することを考えます。ただし、ユーザーがリンクを正確にコピーして開始しない場合入力するには、リンクが画像 (たとえば .../image.jpg) へのリンクであるかどうかをコードで確認してから表示する必要があります。おそらく、この div を作成して、.attr を使用した外部リンクで画像を視覚化しますが、すべてが難しいでしょう。誰かが助けたいなら、あなたは大歓迎です:)

4

2 に答える 2

1

シンプルな方法は複雑ではなく、1 つのテキストボックス、1 つのプレースホルダー、およびいくつかの jQuery コードだけです。

これがテキストボックスであると仮定します：

<input type="text" id="txtImagePreview" />

プレビュー自体にそのようなコンテナーを用意します。

<div id="ImagePlaceHolder"><span class="error">Invalid image URL</span></div>

最後に、必要な jQuery コードは次のとおりです。

$(document).ready(function() {
    var timer = 0;
    $("#ImagePlaceHolder .error").hide();
    var oPreviewImage = $("<img />");
    oPreviewImage.bind("error", function() {
        $(this).hide();
        $(this).parent().find(".error").show();
    });
    $("#ImagePlaceHolder").append(oPreviewImage);
    oPreviewImage.hide();
    $("#txtImagePreview").bind("keyup paste", function() {
        window.clearTimeout(timer);
        var txtPreview = $(this);
        timer = window.setTimeout(function() {
            $("#ImagePlaceHolder").find(".error").hide();
            var imageURL = txtPreview.val();
            oPreviewImage.attr("src", imageURL);
            oPreviewImage.show();
        }, 500);
    });
});​

ライブ テスト ケース。

URL で「.jpg」をチェックしても意味がないことに注意してください。多くの画像 URL には拡張子がありません。たとえば、gravatar はhttp://www.gravatar.com/avatar/b4a2d7e5c786e61fab787097b2d4f27b?s=32&d=identicon&r=PG、これが画像かどうかを URL だけで判断する方法がありません。

ロジックは単純です。指定された URL を に割り当て<img>、プレースホルダー内に表示します。画像オブジェクトonerrorがトリガーされた場合、画像が無効であることを意味し、それを非表示にし、オプションでカスタム フレンドリ メッセージを表示します。

タイマーを使用する理由は 2 つあります。

  • 新しいテキストはイベントの直後には利用できないpasteため、新しい値を取得する唯一の方法は少し待つことです。

  • ユーザーが入力しているときに、すばやく入力しているときに各文字を入力した後に割り当てるポイントはありません。最初に入力を終了させます。

于 2012-09-23T13:31:15.517 に答える
0

http://cssglobe.com/easiest-tooltip-and-image-preview-using-jquery/

上のリンクは確認しましたか？

于 2012-09-23T11:48:01.953 に答える