Question

我在这里知道如何添加/上传/从一个多个输入标签中选择多个文件但是在再次选择之后所有先前的选择都被删除或覆盖。我想要的是。

选择多个文件。（将进行预览，确定已完成）。
用户可以从预览中删除。
将更多文件/图片添加到当前选择

Answer 1

您可以隐藏输入[type = file]并提供与输入交互的UI，以便选择新文件并单独管理文件列表。

所以你可以：

1）添加隐藏的输入<input id="myInput" type="file" multiple style="display:none" />

2）使用调用myInput.click（）的按钮提供外观漂亮的UI以打开提示

3）订阅输入更改事件并获取myInput.files并将它们存储在数组或集合中

4）通过AJAX上传所有文件只需创建一个FormData并附加所有文件然后将FormData实例传递给ajax调用（例如：$ ajax（{... data：formData ...}））。

<强>编辑：

Plnkr link

示例行为：

按“+添加文件”按钮将新文件添加到列表中。
单击列表中的文件将删除文件
按“发送文件”按钮会将文件发送到相应的URL

示例HTML：

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="style.css" />
    <script data-require="jquery" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="script.js"></script>
  </head>

  <body>
    <input id="myInput" type="file" multiple style="display:none" />

    <button id="myButton" type="button" style="border-radius: 5px; background-color: #fff; color: green;">+ Add Files</button>
    <button id="mySubmitButton" type="button" style="border-radius: 5px; background-color: #fff; color: green;">Send Files</button>

    <div id="myFiles"></div>
  </body>

</html>

示例脚本：

$(function(){
  let inputFile = $('#myInput');
  let button = $('#myButton');
  let buttonSubmit = $('#mySubmitButton');
  let filesContainer = $('#myFiles');
  let files = [];

  inputFile.change(function() {
    let newFiles = []; 
    for(let index = 0; index < inputFile[0].files.length; index++) {
      let file = inputFile[0].files[index];
      newFiles.push(file);
      files.push(file);
    }

    newFiles.forEach(file => {
      let fileElement = $(`<p>${file.name}</p>`);
      fileElement.data('fileData', file);
      filesContainer.append(fileElement);

      fileElement.click(function(event) {
        let fileElement = $(event.target);
        let indexToRemove = files.indexOf(fileElement.data('fileData'));
        fileElement.remove();
        files.splice(indexToRemove, 1);
      });
    });
  });

  button.click(function() {
    inputFile.click();
  });

  buttonSubmit.click(function() {
    let formData = new FormData();

    files.forEach(file => {
      formData.append('file', file);
    });

    console.log('Sending...');

    $.ajax({
      url: 'https://this_is_the_url_to_upload_to',
      data: formData,
      type: 'POST',
      success: function(data) { console.log('SUCCESS !!!'); },
      error: function(data) { console.log('ERROR !!!'); },
      cache: false,
      processData: false,
      contentType: false
    });
  });
});

如何从一个输入标签添加/上传/选择多个文件？

1 个答案: