如何使用JavaScript+；jQuery？

在我的web应用程序中，用户可以将文本发布到提要，并且文本可能包括URL。我的代码扫描URL并替换指向URL的锚定标记。我想对此进行更改，以便我的代码可以检测URL是否指向图像，如果指向图像，则在锚定标记内呈现图像标记，而不仅仅是URL文本

我可以通过向URL发送一个快速的“HEAD”请求来查看响应中的内容类型，从而在服务器端代码上实现这一点，并且这种方法工作可靠。然而，由于明显的原因，它不能很好地扩展

如果我能把这个逻辑推到客户端的浏览器上，那就更好了。我想使用JavaScript+jQuery将“HEAD”请求发送到指定的URL，并从响应中读取内容类型头

我知道跨域请求是一个问题。我可以用JSONP吗？我有什么选择

编辑-安全风险

---

我的问题得到了一些很好的答案，但我想用粗体字指出一些问题。正如Adam在评论中指出的，这是一种安全风险。如果您可以保证图像的URL都来自受信任的域，那么您最好使用此解决方案。然而，在我的场景中，用户可以输入他们想要的任何URL。这意味着他们可以创建自己的需要基本身份验证的站点，然后当jQuery运行以在创建的图像上设置src属性时，用户将看到一个用户名/密码对话框，这显然是一个巨大的风险。

只要检查他们给你的字符串是否以.jpg、.png、.gif等结尾即可。 如果它以这样的扩展结束，那就是一个图像。

---

如果不是它，它是一个普通的URL。

您可以尝试将其加载到隐藏的img元素中：

$('<img />').attr('src', url).load(function () { 
    alert('url contains an image'); 
}).error(function () {
    alert('url is no image');
});

$（'试试这个：

使用AJAX加载URL，然后调用getResponseHeader（）获取内容类型

在jQuery中：

$.ajax({
  url: "www.example.com/SomeImage.jpg",
  success: function(output, status, xhr) {
    if(xhr.getResponseHeader("Content-Type")== "image/jpeg") {
      // insert image into page
    }
    else {
      // render url text
    }
  }
});

您可以使用ajax调用获取标题信息，方法是使用
XMLHttpRequestObject.open（“HEAD”，url）；
和
XMLHttpRequestObject.getAllResponseHeaders（）；
，但这仅适用于您自己的域或具有
访问控制允许来源：
标题集

JSONP使用
script
标记，我很确定它无法获取任何标题信息。
您可以创建一个javascript
图像
对象。您将尝试加载以下所有链接：

myImageObject = new Image();

// handle an URL
myImageObject.onload = function(e) {
    alert('it is an image');
}

myImageObject.src = 'http://www.google.bg/images/srpr/logo3w.png';

你能检查一下URL中的文件扩展名是否是图像扩展名吗？我认为安全性是个问题。接受字符串并将其写入页面链接是一个可怕的前景。即使你正在清理输入，像www.virus.com/getone.jpg这样的恶意URL仍然是完全“合法的”而且有害。我希望您已经考虑过这些（以及许多其他）攻击向量。客户端选项不适合验证简单字符串解析之外的适当链接（例如，查找“.jpg”或其他内容）.我认为这是一个非常漂亮的解决方案，因为它不强迫我们提供image extensions.jea的列表，而且它仍然可以用于a“.php”作为图像的文件，如果您只看文件扩展名Brilliant！就会被阻止。这太棒了。唯一的问题是，如果图像位于需要基本身份验证才能访问图像或任何其他类型身份验证的域上，浏览器将弹出一个用户名/密码对话框。因此，这将为您的用户打开网络钓鱼样式的窗口攻击。：/这并不总是有效：。