Question

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

问题是我不知道如何在假图像URL的情况下不提交表单，以便它会显示警告（可能来自Javascript）而不是继续在数据库中保存它。 / p> 是的，有人可以帮帮我吗？尝试多年。

图片文字：

    <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>标记。

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

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/

Answer 2

解决问题的一个简单方法是检查图像是否加载错误，如：

document.getElementById([your_form_id]).onsubmit = function(ev)
{

    var file_path = document.getElementById([your_file_element_id]).value;
    var img = document.createElement('img');
    img.setAttribute('src', file_path);
    img.onerror = function()
    {
        window.alert("Not correct file path");
        ev.preventDefault();
    }
}

小提琴：http://jsfiddle.net/5GNxt/

请记住，这种方法不会真正起作用 - 您真正需要做的是服务器端检查。如果您正在使用PHP，则可以使用get_headers函数轻松检查文件是否存在。您需要做的就是检查它是否是图像 - 使用imagecreatefrom函数之一。无论哪种方式 - 需要更多关于服务器端语言的信息才能真正提出更多建议。

Answer 3

此函数将检查文件（url）是否存在。

EDIT但是，不要使用此功能，因为它不起作用总是因为same-origin policy restricts限制从一个来源加载的文档或脚本如何与来自另一个来源的资源交互。而是使用@eithedog提供的功能。

var file_exists = function(url){
    var xhr = new XMLHttpRequest();
    xhr.open("HEAD", url, false);
    xhr.send();
    return (xhr.status != 404);
}

var url = document.getElementById('id-of-your-element').value;

if(file_exists(url)){
    console.log("This is fine");
}else{
    console.log("I can't reach that file");
}

或使用类似的东西

var img_exists = function(url){
    var img = new Image();
    img.onload = function() {
        console.log("Image exists");
    };
    img.onerror = function(){
        console.log("Image doesn't exist or an error has occurred");
    };        
    img.src = url;
}

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

3 个答案: