Javascript - 如何检查输入的图像 URL 是否确实存在

Question

所以基本上我让用户将图片上传到我的网站**(通过键入 URL)**，这将以他的名字保存在我的数据库中。虽然，我不希望任何人上传无效的 URL，这将显示一个空框。

问题是我不知道如何在假图片 URL 的情况下不提交表单，这样它就会显示一个警报(可能来自 Javascript)并且不会继续将其保存在数据库中。

有人可以帮我吗？尝试了很长时间。

图片文字:

    <p style="font-size:20px; font-family:Arial; font-weight:800;">URL to presented Image: 
</p><input type="text" name="image" id="image" class="URLs" value="http://" />

提交按钮:

    <p><input type="submit" class="myButton" style="padding: 25px 150px; line-height:6px;" 
value="Submit Details"/></p>

我需要向这些输入添加什么？我需要向 Javascript 添加什么？

提前致谢!

Answer 1

有一个隐藏的<img>加载 URL 的标记。

• 使用onerror如果图像不存在，处理程序会向您报告。
• 使用onload如果图像DID 存在，处理程序会向您报告。

HTML:

URL: <input type="text" id="url" name="url" />
<button type="button" onclick="test()">Test</button>
<img style="display: none" id="image" onerror="errorCallback()" onload="loadCallback()" />

JavaScript(如果您想使用它，可以轻松转换为 jQuery):

var test = function () {
  document.getElementById('image').src = document.getElementById('url').value;
}

var errorCallback = function () {
  alert('Image did not exist');
}

var loadCallback = function () {
  alert('Image existed');
}

http://jsfiddle.net/7hTMu/1/