Question

我有一个使用jQuery验证插件的前端表单来验证我的字段并允许用户从远程网址上传图像并且一切都很好。

问题是某些用户可能会发送一个不存在的文件的网址，并且该帖子会显示一个空图像。

ie：http://example.com/Photoexample.jpg＆lt; - 其中Photoexample.jpg在该服务器上不存在。

这是我到目前为止所做的/尝试：

jQuery.validator.addMethod('filesize', function(val, elem, param) {
    // param = size (en bytes) 
    // elem = element to validate (<input>)
    // val = value of the element (file name)
    return this.optional(elem) || (elem.files[0].size <= param) 
});

我知道有一种方法可以用PHP这样做：

$size = getimagesize($url);
if($size !== false){
    // Image exists
}else{
    // Image doesn't exist
}

但我不知道如何用ajax实现它。

我想检查是否存在远程url文件/内容以避免我的表单提交一个不存在的文件的空URL。我怎么能做到这一点？

Answer 1

当你使用jQuery时 - 你可以使用ajax做这样的事情来检查URL是否存在：

HTML


    <div id="result"></div>

SCRIPT


    $.ajax({
            type: 'HEAD',
            url: 'http://example.com/Photoexample.jpg',
            success: function() {
                    // The URL exists
                   $('#result').text('This URL exists');
            },
            error: function() {
                    // The URL does not exist
                    $('#result').text('Sorry - This URL does not exist');
            }
        });

修改

好的，所以上面的内容不适用于跨域，所以这里有另一种解决方案。

我们将尝试再次从用户指定的URL加载图像并检查是否成功。

首先添加HTML img标记以检查ID：

<img id="imgFileLoaded" width="1" height="1" />

接下来我们可以设置jQuery来检查图像：

// set you img url variable
var url = 'http://ir.ebaystatic.com/pictures/aw/pics/globalheader/spr11.png';

// check if img loads
$(function() {
    $("#imgFileLoaded").error(function(){
        // Img Failed
       $('#result').text('Failed.');

    }).attr('src', url);

    $('#imgFileLoaded').load(function() {
        //Img Success
        $('#result').text('Success!');

    });
});

我在小提琴中对此进行了测试：

http://jsfiddle.net/dm5CU/

Answer 2

正如Sparky提到的那样，使用remote method其他代码更好，下面的代码应该用于跨域检查：

$("<img>", { 
   src: $url, 
   load: function () { 
       // Image exists 
   },        
   error: function () { 
       // Image doesn't exist
   }
});

然而，对于仅下载图像标题但不跨域工作的同步检查方法，您可以使用steakpi的ajax方法。

如何将方法添加到jquery验证插件以检查远程URL上是否存在文件

2 个答案: