javascript - 在客户端添加和删除附件(而不是替换以前的附件)

Question

请查看以下网址: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>

Answer 1

我想您需要使用输入的"file"属性，例如:

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

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