0

我正在尝试使用 jQuery 进行“实时”图像预览，但现在我只有这个想法。所以这个想法是有一个 div(100px/100px) 和一个输入表单，当你把链接放在那里以在 div 中将图像“缩小”到 100px/100px 时可视化。但是如果用户不完全复制链接并开始要键入它，代码应检查链接是否正确显示图像（例如 .../image.jpg），然后显示它。我可能会制作这个 div 来可视化带有 .attr 外部链接的图像，但整个事情对我来说很难。如果有人想提供帮助，欢迎您:)

4

2 回答 2

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触发，则表示图像无效，将其隐藏并可选择显示自定义友好消息。

使用定时器有两个原因：

  • 事件发生后新文本不可用paste，因此获取新值的唯一方法是稍等片刻。

  • 当用户打字时，没有必要在他快速打字时输入每个字符后分配 - 让他先完成。

于 2012-09-23T13:31:15.517 回答
0

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

你检查过上面的链接吗

于 2012-09-23T11:48:01.953 回答