Question

我正在努力实现这个目标：当有人上传图片时，图片会在右侧的一个较小的框中上传，当他们上传另一个图片时点击大框，此图片会上传到另一个右侧的小框中。请参阅附图。可以使用Javascript和HTML实现吗？Image representing the query

Here is my html:
        <div class="form-group">
            <div class="row">
              <div class="col-lg-2 col-md-12 col-sm-12 col-xs-12">
              <img src="box.jpg">
              </div>
              <div class="col-lg-10 col-md-12 col-sm-12 col-xs-12">
              <img src="smallBox.jpg" id="smallimg1">
              <img src="smallBox.jpg" id="smallimg">
              <img src="smallBox.jpg" id="smallimg">
              <img src="smallBox.jpg" id="smallimg">
              <img src="smallBox.jpg" id="smallimg">
              <img src="smallBox.jpg" id="smallimg">
              <img src="smallBox.jpg" id="smallimg">
              <img src="smallBox.jpg" class="img-responsive">
              <img src="smallBox.jpg" id="smallimg1">
                <div style="margin-top:12px;">
                <img src="smallBox.jpg" id="smallimg1">
                <img src="smallBox.jpg" class="img-responsive">
                <img src="smallBox.jpg" class="img-responsive">
                <img src="smallBox.jpg" class="img-responsive">
                <img src="smallBox.jpg" class="img-responsive">
                <img src="smallBox.jpg" class="img-responsive">
                <img src="smallBox.jpg" class="img-responsive">
                <img src="smallBox.jpg" class="img-responsive">
                <img src="smallBox.jpg" class="img-responsive">
                <img src="transparentBox.png" style="border:1px dashed black;" id="imgdotted">
                <div id="darkBox"><img src="smallDarkBox.jpg" style="position: absolute;z-index: 2;left: 380px;top: 35px;"></div>
                </div>
              </div>
            </div>
          </div>

Answer 1

所以要澄清一下，你想要上传图像，并在添加它们时填满这些小盒子吗？不确定你目前拥有什么，但如果那个片段就是你所拥有的，那么你就有很多工作要做。有100种不同的方法来完成这项任务，这里有一些建议：

您需要一种上传图片的机制。某种服务器端编程，例如.NET，PHP或其他一些API。如果您尝试使用javascript，那么您将需要一个API。浏览器中的JS会将该图像发布到api。 api中的代码将读取api请求并将文件保存在某处。另一种选择可能是接受文件并“提交”表单的Web表单，它本质上是一个api帖子，仍然需要服务器端代码，但它比用js手动调用api更简单。这将完成将图像从用户的浏览器获取到存储图像的服务器的任务。

上传后，网页需要了解并下载所有存储的图像。这将需要另一个服务器端调用（API调用，.NET Web应用程序等）来从数据库（复杂）获取内容，或者仅扫描它们存储在其上的Web文件夹（简单）。您可以仅使用javascript客户端查询Web文件夹，并在需要时避免另一个服务器调用。您需要使用图像的位置更新图像标记的src属性

所有这些说起来容易做起来难得多，如果我没有详细介绍，那么很抱歉，但还有很多需要解决的问题。我真的只是想指出你正确的方向。

如何在特定位置加载图像

1 个答案: