创建一个 HTML/PHP 页面,非开发人员可以在以后更改图像


Create an HTML/PHP page where non developers can change images later

我想创建一个充满图像的HTML/PHP页面。但是这些图像应该可以由非开发人员稍后更改。所以基本上我会在这个小提琴中做一些类似的事情。我想了解非开发人员以后更改这些图像的方法。我拥有的代码如下

<div class="container-fluid">    
<div class="row my-row">                   
    <div class="col-xs-3 col-sm-3 col-md-3 my-col">
      <img src="http://placehold.it/300x400" class="img-responsive" alt=""/>
      <img src="http://placehold.it/300x400" class="img-responsive" alt=""/>
    </div>                       
    <div class="col-xs-6 col-sm-6 col-md-6 my-col">
      <img src="http://placehold.it/600x803" class="img-responsive" alt=""/>
    </div>   
    <div class="col-xs-3 col-sm-3 col-md-3 my-col">
      <img src="http://placehold.it/200x210" class="img-responsive" alt=""/>
      <img src="http://placehold.it/200x323" class="img-responsive" alt=""/>
    </div>              
</div>

.CSS:

img {
  margin: 3px;  
  width: 100%;  
}
  .my-row {
    display: table;
    overflow: hidden;
  }
  .my-col {
    display: table;
    overflow: hidden;
  }
  .col-sm-6 {
    padding-left: 0px !important;
    padding-right: 0px !important;
  }
  .col-sm-3 {
    padding-left: 0px !important;
    padding-right: 0px !important;
  }

网上有几个基于 PHP 的图像上传库教程示例。

基本上,您要做的是:

(1)初始页面渲染:使用PHP循环浏览文件夹中的所有图像,并构建HTML以将它们折叠成HTML结构。

(2) jQuery/js:当用户点击添加按钮时,文件上传系统会接受文件并将其移动到Web服务器上的所需文件夹中。我建议使用Ravi Kusuma优秀的Hayageek jQuery文件上传插件。它很简单,而且有效。请注意,您可能希望修改他的upload.php(服务器端)以包括自动调整大小。

(3)AJAX:您可能希望使用AJAX来允许页面与后端PHP代码进行通信,而无需使用<form>(其主要优点是不刷新/重新加载页面)。看这篇文章

一些可能的教程:

http://www.codingcage.com/2015/06/creating-image-gallery-from-folder-php.html

http://www.sitepoint.com/php-gallery-system-minutes/

在YT中搜索"基于PHP文件的图片库"