在客户端添加和删除附件（而不是替换以前的附件）答案

【问题标题】：Adding and removing attachments(instead of replacing prevoius one) on client side在客户端添加和删除附件（而不是替换以前的附件）
【发布时间】：2017-12-17 19:33:06
【问题描述】：

请看以下网址：https://codepen.io/Sandipaot123/pen/LLJdeY/

我可以为一个文件添加和删除附件，下次用新文件替换旧文件。如何每次点击上传按钮时多添加一行，并且也可以删除它。

var fileInputTextDiv = document.getElementById('file_input_text_div');
var fileInput = document.getElementById('file_input_file');
var fileInputText = document.getElementById('file_input_text');

fileInput.addEventListener('change', changeInputText);

function changeInputText() {
  var str = fileInput.value;
  var i;
  if (str.lastIndexOf('\\')) {
    i = str.lastIndexOf('\\') + 1;
  } else if (str.lastIndexOf('/')) {
    i = str.lastIndexOf('/') + 1;
  }
  fileInputText.value = str.slice(i, str.length);
}

$(document).ready(function() {
  $("#clear").click(function() {
    $("#file_input_file").val("");
    var fileInputText = document.getElementById('file_input_text');
    fileInputText.value = "";

  });
});

body {
  display: flex;
}

.file_input_div {
  margin: auto;
  width: 250px;
  height: 40px;
}

.file_input {
  float: left;
}

#file_input_text_div {
  width: 200px;
  margin-top: -8px;
  margin-left: 5px;
}

.none {
  display: none;
}

.content-grid {
  max-width: 550;
  height: auto;
  margin: auto;
  padding: 2px;
}

.mdl-cell {
  margin: 2;
}

.mdl-list {
  padding: 1px 3px;
}

.mdl-list__item {
  padding: 3px;
}

body {
  padding-top: 20px;
  padding-left: 20px;
  box-sizing: border-box;
}


}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mdl-card mdl-cell mdl-cell--12-col mdl-cell--4-col-tablet mdl-shadow--2dp">
  <ul class="mdl-list">
    <li class="mdl-list__item">
      <span class="mdl-list__item-secondary-action">
                <label class="mdl-button mdl-js-button mdl-button--colored">
                    <i class="material-icons">file_upload</i>
                    <input id="file_input_file" class="none" type="file" />
                </label>
            </span>
      <div id="file_input_text_div" class="mdl-textfield mdl-js-textfield textfield-demo">
        <input class="file_input_text mdl-textfield__input" type="text" disabled readonly id="file_input_text" />
        <label class="mdl-textfield__label" for="file_input_text"></label>
        <button id="clear">Clear</button>
      </div>
    </li>

  </ul>
</div>

【问题讨论】：

见this answer根据您的需要定制希望它会有所帮助

标签： javascript jquery material-design

【解决方案1】：

我猜你需要玩输入的“文件”属性，例如：

var filesToUpload = [];
$("file_input_file").change(function(){
  let files = this.files;
  filesToUpload.push(files);
});

您可以找到有关FileLists here 的更多信息。我只是好奇是否可以从自定义数组（如上面的filesToUpload）间接将这些文件发送到服务器，而不是直接从输入发送。如果是 - 那么问题就解决了。然后您可以根据filesToUpload 的内容修改视图。

【讨论】：