我想创建一个充满图像的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文件的图片库"