在我的Angular /离子应用程序中,我有一个很大的名字列表,我必须检查相应的图像是否存在。因为有时我们会将图片与应用程序一起发送,但有时我们会在稍后找到图片,并将其放到服务器上,这样我们就不必只为图片而重新提交应用程序。
<ion-item collection-repeat="item in prodataSelect | orderBy:data.sort | filter: data.selectBrand.brand:true | filter: data.selectName.name | filter: generalSearchFunc | filterObj:['brand','modelStrict']" item-width="25%" item-height="35%" item-render-buffer="8">
<a class="optionfuninit item-content">
<div class="imagebox">
<img class="imageoptionsmodel " ng-src="{{imagesUrls[item.imageName]}}" />
</div>
</a>
</ion-item>
我首先检查图像是否存在于本地(在应用程序中),如果不存在,则检查它是否存在于我们的服务器(http://...)如果不是,我使用默认图像(default.png)。
我使用这个Angular 服务进行检查:
.service('UrlExists', [
'$http',
'$q',
function ($http, $q) {
'use strict';
this.f = function (url) {
var http;
//UrlExistsDeferred = $q.defer();
try {
http = new XMLHttpRequest();
http.open("HEAD", url, false); //false is synchronous
http.send();
} catch (err) {
console.log("An error on the XMLHttpRequest:" + err.name + "---" + err.message);
}
if (http.readyState === 4) {
if (http.status === 200) {
//UrlExistsDeferred.resolve();
return true;
} else {
//UrlExistsDeferred.reject();
return false;
}
}
//return UrlExistsDeferred.promise;
};
但问题是,我在控制台上收到了很多404个错误,这非常恼人。
你有更好的主意吗?
1条答案
按热度按时间myzjeezk1#
是的,我有一个更好的主意。您可以在服务器上创建一个API函数,该函数将接受URL POST参数,检查服务器上是否存在该参数,如果存在则返回1,如果不存在则返回0。在客户端,您可以向该API函数发送POST请求,传递要检查的URL。如果该文件碰巧不存在,请确保不会在服务器上生成错误。
编辑
有一些关于在PHP中创建REST风格的API的very good tutorial,因此我不会详细描述它们,而只会告诉您,您将需要一些
class
,其中包含一些function
,并且您将希望能够通过reflection调用class
的function
。当您或多或少地完成了这一点的实现后,您将希望使用PHP对其进行测试。尽量确保您将有一个function
,它将接受一个字符串作为方法名称,并基于该字符串调用方法。当客户端发送命令时,您将需要它。当您测试完PHP部件时,您将必须实现客户端的使用。建议您建立一种通信,在其中您可以发送如下消息检查/IsURL现有
并将URL作为POST参数传递给服务器。但是,要时刻注意安全,绝不允许有危险的事情发生。例如,如果你创建了一个
function
来删除图片,那么你需要检查用户是否有这样做的必要权限,因为坏人会向你的API发送帖子消息,试图窃取你的数据,或者损害你网站的完整性。在服务器端,您将需要在
class
中使用此功能并调用此
function
。在客户端,如果收到1,则文件存在,如果收到0,则文件不存在。您可能希望检查URL中的路径,以禁止程序员通过API函数在其他地方请求文件名。基本上,这个答案中的部分内容可能是清楚的,而其他部分可能对于您目前的知识水平来说是不清楚的。然而,如果您花时间学习一些教程,链接到这里,甚至没有链接到这里,那么您会发现实现这样的API非常容易。别忘了,这项学习不会白费,因为它会极大地提高你作为程序员的地位。