Use jquery to detect if a remote picture file exists

Use jquery to detect if a remote picture file exists

Recently for my silly bean people smile garden add picture function, encountered this problem, users can fill out a remote image address, you can also upload a local image. In order not to waste the resources of the server, we need the client to fill in the remote image address to determine whether the user can access. can be accessed on the server side for processing to be added to the database.

Here's how it's done:

1, the user adds the remote picture to the input control, and adds the focus loss handling method to the input control;

2. When the value of the input control is not NULL, use AJAX to access the remote address, and when it is reachable, the returned status code is success.

This is mainly about jquery to complete such an AJAX request.

Although jquery provides a simple get method to complete an AJAX request, this method cannot be used here. Instead, use the Ajax method provided by jquery to provide an AJAX-based approach. There are several settings that need to be made for this Ajax:

1. Request URL, get through input control

2, set the AJAX request time-out (timeout), because if the remote file request waiting time is too long itself will affect the user's access experience, and the default timeout is 30 seconds, too long.

3. Set the callback function for successful request success

4. Set callback function error for request failure

The implementation code is as follows:

$("input").blur(function() {

varimgurl = $("input").val();

if(imgurl !== ‘‘) {

// 设置Ajax请求超时时间为1s钟

$.ajax(imgurl, {

type: ‘get‘,

timeout: 1000,

success: function() {

alert("请求成功");

},

error: function() {

alert("请求失败");

}

});

}

});

One thing to note here is that the AJAX request time-out timeout setting is in milliseconds, and this setting is global, so if you need to make another Ajax request again, you need to reset the timeout value.

One of the benefits of this is that before submitting the form, we can first simulate the user to visit the site when the image of the request effect, for the remote picture server poor impact on the access experience of the picture can be filtered out in advance!

* * Evil Division line, I am here to apologize for you, for the above error code, above through the method of jquery to determine whether remote image files exist method only in the same domain name can be used, cross-domain name use is not possible, after research, finally found the right method, is amends bar * *

There's no need to use jquery, just plain JavaScript code.

After creating an image () object, add a handle to the OnLoad event for this object and a handling method for the OnError event, and then determine the image to be loaded by defining the Src property of the Image object.

When the remote picture is successfully loaded into native memory, the onload event is triggered, if the picture is not found, or if the load fails, the OnError event is triggered and the code is as follows:

// 定义一个Image对象

varimg = newImage();

// 为Image对象添加图片加载成功的处理方法

img.onload = function() {

alert("图像加载成功");

};

// 为Image对象添加图片加载失败的处理方法

img.onerror = function() {

alert("图像加载失败");

}

// 开始加载图片

img.src = imgurl;

This piece of code is tested, right!

http://www.xcoder.cn/index.php/archives/1019

Use jquery to detect if a remote picture file exists