Javascript 自动生成用于上载图像的html

我有一个用html/css、php和js编码的网站（后两部分只是一些基本功能）

当我想上传图像时，我会硬编码它。这是一个不错的解决方案，但现在我必须上传300多张图片（这是为那些想要查看他们图片的客户准备的，我是一名摄影师）

这需要几个小时才能输入，所以有没有一种方法可以一次上传300张图片，它会自动生成下面的代码（但是，.jpg文件名应该跟在它自己的文件名后面，并且“id”和“ng show”每次都必须递增）。它必须遵循以下格式：

<li  class="span4 gallery-item" data-id="id-1">

             <img class="fancybox" src="img/photoshop2_small.jpg" data-big="img/photoshop2.jpg" ng-click="showFacebook = 1;" />

              <div ng-show="showFacebook === 1"
              class="fb-like"  data-href="img/photoshop2.jpg" data-width="300"

             data-layout="standard" data-action="like" data-show-faces="false" data-share="true" >
      </div>

</li>

我觉得这是不可能的，我找到的唯一解决方案是它自动生成一个简单的html代码，但这在我的例子中没有用处

---

我该怎么办？

若您使用Angular，为什么不实现一个服务来获取图像列表并执行类似操作

<li  class="span4 gallery-item" ng-repeat="image in images track by $index" data-id="id-{{image.ID}}">
    <img class="fancybox" src="{{image.smallURL}}" data-big="{{image.bigURL}}" ng-click="showFacebook = image.ID;" />
    <div ng-show="showFacebook === 1" class="fb-like" data-href="{{image.bigURL}}" data-width="{{image.width}}" data-layout="standard" data-action="like" data-show-faces="false" data-share="true"></div>
</li>

---

另一个选择是在PHP中执行此操作，这可能更好。

若您使用Angular，为什么不实现一个服务来获取图像列表并执行类似操作

<li  class="span4 gallery-item" ng-repeat="image in images track by $index" data-id="id-{{image.ID}}">
    <img class="fancybox" src="{{image.smallURL}}" data-big="{{image.bigURL}}" ng-click="showFacebook = image.ID;" />
    <div ng-show="showFacebook === 1" class="fb-like" data-href="{{image.bigURL}}" data-width="{{image.width}}" data-layout="standard" data-action="like" data-show-faces="false" data-share="true"></div>
</li>

另一个选择是在PHP中执行此操作，这可能更好

要么使用FTP上传所有图像，要么使用php文件管理器

使用php目录函数检索数组中的文件

循环遍历数组并回显html

使用.jpg filename的数组值中的filename，在每个循环中增加一个变量，并用于“id”和“ng show”

要么使用FTP上传所有图像，要么使用php文件管理器

使用php目录函数检索数组中的文件

循环遍历数组并回显html

使用.jpg filename的数组值中的filename，在每个循环中增加一个变量，并用于“id”和“ng show”

---

我认为这个解决方案似乎是合理的。我已经通过了第一步，现在我只需要弄清楚如何做其余的。我是个新手，所以可能会很难。你好。如果这违反了规则（我有点生疏）和/或我让你处于一个你不喜欢的位置，我非常抱歉。因此，我想问你一个问题：你能为我开发这个吗？我当然会付钱。我有点。。。好吧，不客气，别担心。我可以帮你。你上传了所有的图片吗？是的，我上传了。我有一个名为“img”的文件夹，里面有所有的照片：）可爱。给你发了一封电子邮件：）我认为这个解决方案似乎是合理的。我已经通过了第一步，现在我只需要弄清楚如何做其余的。我是个新手，所以可能会很难。你好。如果这违反了规则（我有点生疏）和/或我让你处于一个你不喜欢的位置，我非常抱歉。因此，我想问你一个问题：你能为我开发这个吗？我当然会付钱。我有点。。。好吧，不客气，别担心。我可以帮你。你上传了所有的图片吗？是的，我上传了。我有一个名为“img”的文件夹，里面有所有的照片：）可爱。给你发了一封电子邮件：）似乎是一个可接受的解决方案，但我认为这对我来说太棘手了。我想你可能熟悉Angular，因为你正在使用它，但PHP将是最简单的解决方案：）似乎是一个可接受的解决方案，但我认为它对我来说太棘手了。我认为你可能熟悉Angular，因为你正在使用它，但PHP将是最简单的解决方案：）