Question

我已经使用here给出的示例将文件上传到我的Web服务器。我所做的调整是，我添加了几个文件上传控件，因为我不得不从同一页面上载3张图片（页眉，背景和页脚）。一切正常。我面临的唯一问题是，如果我重新选择一个图像（例如标题），它不会替换已经选择的图像。而是将图像添加到队列中。我的要求是不允许用户使用超过3张图片。如果他选择图像（页眉，背景或页脚），则应替换队列中的图像（如果队列中存在）。我在上传时尝试了示例链接中提供的“ removeFromQueue（）”功能，但该功能不起作用。

我更改的唯一代码部分是再添加2个文件上传控件：

<div class="col-md-3">
    <div class="mt-20 row">    
      <input type="file" #fileInput (change)="addToQueue()" id="file-1" class="inputfile inputfile-1" />
      <label for="file-1"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" viewBox="0 0 20 17">
          <path d="M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z"
          /></svg> <span>Header Image&hellip;</span></label>
    </div>
    <div class="mt-20 row">     
      <input type="file" #fileInput (change)="addToQueue()" id="file-2" class="inputfile inputfile-1" />
      <label for="file-1"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" viewBox="0 0 20 17">
          <path d="M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z"
          /></svg> <span>Background Image&hellip;</span></label>
    </div>
    <div class="mt-20 row">     
      <input type="file" #fileInput (change)="addToQueue()" id="file-3" class="inputfile inputfile-1" />
      <label for="file-1"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" viewBox="0 0 20 17">
          <path d="M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z"
          /></svg> <span>Footer Image&hellip;</span></label>
    </div>
  </div>

上传前替换队列中的现有文件

0 个答案: