Javascript AngularJS上传图像并推入阵列
Javascript AngularJS上传图像并推入阵列,javascript,jquery,html,angularjs,Javascript,Jquery,Html,Angularjs,var-app=angular.module（'gemStore'，[]）； app.controller（'StoreController'，函数（$scope）{ $scope.gems=[ { “名称”：“正长石”， “说明”：“合成超硬材料二硼化铼于1962年首次合成，与列表中的其他材料相比，二硼化铼是一种更便宜的材料，因为其生产不涉及高压。”， “公式”：（ReB2）“， “排名”：5， “硬”：72， “稀有性”：7， “图像”：[ “images/rhenium.jpg”， “im
var-app=angular.module（'gemStore'，[]）；
app.controller（'StoreController'，函数（$scope）{
$scope.gems=[
{
“名称”：“正长石”，
“说明”：“合成超硬材料二硼化铼于1962年首次合成，与列表中的其他材料相比，二硼化铼是一种更便宜的材料，因为其生产不涉及高压。”，
“公式”：（ReB2）“，
“排名”：5，
“硬”：72，
“稀有性”：7，
“图像”：[
“images/rhenium.jpg”，
“images/rhenium2.jpg”，
“图片/铼M3.jpg”
],
“审查”：[{
“明星”：5，
“身体”：“我爱这颗宝石！”，
“作者”：joe@example.org"
}, {
"明星":一,，
“身体”：“这块宝石很烂。”，
“作者”：tim@example.org"
}]
}, {
“名称”：“石英”，
“说明”：“石英是一种由一部分硅和两部分氧组成的化合物。它是二氧化硅（SiO2）。它是地球表面发现的最丰富的矿物，其独特的性质使其成为最有用的天然物质之一。”，
“配方”：（SiO2）“，
“排名”：4，
“硬”：100，
“稀有性”：7，
“图像”：[
“images/quartz.jpg”，
“images/quartz2.jpg”，
“images/quartz3.jpg”
],
“审查”：[{
"明星":3,，
“身体”：“我觉得这颗宝石还可以，老实说，我可以用更多的‘光泽’。”，
“作者”：JimmyDean@example.org"
}, {
"明星":四,，
“身体”：“任何有12张‘脸’的宝石都是给我的！”，
“作者”：gemsRock@example.org"
}]
}, {
“名称”：“黄玉”，
“说明”：“黄玉是一种铝和氟的硅酸盐矿物，化学式为Al2SiO4（F，OH）2。黄玉在正交晶系中结晶，其晶体大多为棱柱状，由棱锥面和其他面终止。”，
“配方”：“（Al2SiO4（OH-，F-）2）”，
“排名”：3，
“硬”：200，
“稀有性”：8，
“图像”：[
“images/topaz.jpg”，
“images/topaz2.jpg”，
“images/topaz3.jpg”
],
“审查”：[{
"明星":一,，
“身体”：“这颗宝石对于它的‘稀有’价值来说太贵了。”，
“作者”：turtleguyy@example.org"
}, {
"明星":一,，
“车身”：“BBW：高‘光泽’！=高质量。”，
“作者”：LouisW407@example.org"
}, {
"明星":一,，
“身体”：“不要浪费你的卢布！”，
“作者”：nat@example.org"
}]
}, {
“名称”：“刚玉”，
“说明”：“刚玉是一种形成岩石的矿物，见于火成岩、变质岩和沉积岩中。它是一种氧化铝，化学成分为Al2O3，具有六方晶体结构。”，
“配方”：（Al2O3）”，
“排名”：2，
“硬”：400，
“稀有性”：9，
“图像”：[
“images/corundum.jpg”，
“images/corundum2.jpg”，
“images/corundum3.jpg”
],
“审查”：[{
"明星":一,，
“身体”：“这颗宝石对于它的‘稀有’价值来说太贵了。”，
“作者”：turtleguyy@example.org"
}, {
"明星":一,，
“车身”：“BBW：高‘光泽’！=高质量。”，
“作者”：LouisW407@example.org"
}, {
"明星":一,，
“身体”：“不要浪费你的卢布！”，
“作者”：nat@example.org"
}]
}, {
“名称”：“钻石”，
“描述”：“锆石是我们最梦寐以求和最受欢迎的宝石。您将为成为这颗华丽且高光泽宝石的骄傲所有者而付出高昂代价。”，
“公式”：（C）“，
“排名”：1，
“硬”：1500，
“稀有性”：10，
“图像”：[
“images/diamond.png”，
“images/diamond2.jpg”，
“images/diamond3.png”
],
“审查”：[{
"明星":一,，
“身体”：“这颗宝石对于它的‘稀有’价值来说太贵了。”，
“作者”：turtleguyy@example.org"
}, {
"明星":一,，
“车身”：“BBW：高‘光泽’！=高质量。”，
“作者”：LouisW407@example.org"
}, {
"明星":一,，
“身体”：“不要浪费你的卢布！”，
“作者”：nat@example.org"
}]
}];
var number=5；//从5种物质开始
$scope.insertSubstance=函数（addsub）{
addsub.reviews=[]；
$scope.gems.push（addsub）；
this.sub={}；
number=number+1；//我这样做是因为每当用户添加一个对象时，它都会更改标题，但不起作用
如果（addsub.rank==1）
{
$scope.gems[0].rank=6；
$scope.gems[1].rank=5；
$scope.gems[2].rank=4；
$scope.gems[3].rank=3；
$scope.gems[4].rank=2；
}
如果（addsub.rank==2）
{
$scope.gems[0].rank=6；
$scope.gems[1].rank=5；
$scope.gems[2].rank=4；
$scope.gems[3].rank=3；
}
如果（addsub.rank==3）
{
$scope.gems[0].rank=6；
$scope.gems[1].rank=5；
$scope.gems[2].rank=4；
}
如果（addsub.rank==4）
{
$scope.gems[0].rank=6；
$scope.gems[1].rank=5；
}
如果（addsub.rank==5）
{
$scope.gems[0].rank=6；
}
}
$（“#num”）。追加（数字）；
$scope.addReview=功能（石头）{
这个。宝石。评论。推（石）；
this.rev={}；
}
});
app.controller（'TabController'，函数（$scope）{
$scope.tab=1；
$scope.setTab=函数（newValue）{
$scope.tab=新值；
};
$scope.isSet=函数（tabNumber）{
返回$scope.tab==tabNumber；
};
});
硬物质
地球上最硬的物质
{{gem.name}
{{gem.rank}
-
描述
{{gem.description}}
<div ngf-drop ngf-select
ng-model="picFile" name="file"
class="drop-box"
ngf-drag-over-class="{accept:'dragover', reject:'dragover-err', delay:100}"
ngf-multiple="false" ngf-allow-dir="false"
ngf-change="addImage(picFile, images)"
ngf-accept="accept"
accept="image/*">
<span class="dropFilesText">{{ 'dropFilesText' | translate }}
</span>
</div>
$scope.addImage = function(file, files) {
if (file) {
if ($scope.fileIndex >= ConfigurationService.getMaxNumFiles()) {
$scope.openMessageInfoModalPanel($translate.instant('upload'), $translate.instant('error.maxFilesUploadExceeded') + '5');
} else if (file.type.indexOf('image') < 0) {
$scope.openMessageInfoModalPanel($translate.instant('upload'), $translate.instant('error.nonImageFileUpload'));
} else if (file.size > ConfigurationService.getMaxFileSize()) {
$scope.openMessageInfoModalPanel($translate.instant('upload'), $translate.instant('error.maxFileSizeExceeded'));
} else if ($scope.fileReaderSupported) {
$timeout(function() {
var fileReader = new $window.FileReader();
fileReader.readAsDataURL(file);
fileReader.onload = function(e) {
$timeout(function() {
file.dataUrl = e.target.result;
files[$scope.fileIndex] = file;
$scope.fileIndex++;
});
};
});
}
}
};
<h5><b>Image Upload Instructions:</b>
<ol>
<li>-Save the images into the substance/images Folder</li>
<li>-The image must be a jpg file</li>
<li>-Name the images by a number with a prefix fot_ <br>
-Example: fot_1 would be the first image </li>
<li>In the areas below refer to the number of the image
<br>-Example: if you called an image fot_5 just input number 5 below</li>
</ol>
<div class="form-group">
<input id="img1" type="number" placeholder="Input your Image number">
</input>
</div>
<div class="form-group">
<input id="img2" type="number" placeholder="Input your Image number">
</input>
</div>
<div class="form-group">
<input id="img3" type="number" placeholder="Input your Image number">
</input>
</div>
var here1 = $("#img1").val();
var here2 = $("#img2").val();
var here3 = $("#img3").val();
var img1 = "images/fot_"+here1+".jpg";
var img2 = "images/fot_"+here2+".jpg";
var img3 = "images/fot_"+here3+".jpg";
addsub.images = [];
addsub.images[0] = img1;
addsub.images[1] = img2;
addsub.images[2] = img3;