Javascript 如何从一个输入标签中添加/上载/选择多个文件？_Javascript_Jquery_Html

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

javascript jquery html

Javascript 如何从一个输入标签中添加/上载/选择多个文件？,javascript,jquery,html,Javascript,Jquery,Html,我来这里是想知道如何从一个输入标签中添加/上传/选择多个文件，该标签是多个的，但再次选择后，所有以前的选择都被删除或覆盖。我想要的是选择多个文件。将进行预览，确定此操作已完成。用户可以从预览中删除所选内容。向当前选择添加更多文件/图像您可以隐藏输入[type=file]，并提供与输入交互的UI，以便选择新文件并单独管理文件列表因此，您可以：添加隐藏的输入提供一个具有调用myInput的按钮的外观良好的UI。单击以打开提示订阅输入更改事件并获取myInput.files并将其存储

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

选择多个文件。将进行预览，确定此操作已完成。用户可以从预览中删除所选内容。向当前选择添加更多文件/图像

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

因此，您可以：

添加隐藏的输入

提供一个具有调用myInput的按钮的外观良好的UI。单击以打开提示

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

要通过AJAX上传所有文件，只需创建一个FormData并附加所有文件，然后将FormData实例传递给AJAX调用，例如：$AJAX{…data:FormData…}

编辑：

示例行为：

按+添加文件按钮将向列表中添加新文件。单击列表中的文件将删除该文件按“发送文件”按钮将文件发送到相应的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 => {
      /* here I just put file as file[] so now in submitting it will send all 
      files */
      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
    });
  });
});

3订阅输入更改事件并获取myInput.files并将其存储在数组或集合中？我很担心。如何在数组中存储文件引用？4要通过AJAX上传所有文件，只需创建一个FormData并附加所有文件，然后将FormData实例传递给AJAX调用？什么是let而不是var？请检查这一主题的描述。还考虑使用const和让我们而不是VAR。在PHP中，我正在打印$x文件，这里只接收一次文件处理多个部分数据，这取决于服务器端的实现。如果您使用的是PHP，则可能需要从客户端发送数据，如-formData.append'file[]，file；-文件[]，而不是文件。然后我们希望有$_文件['file']。我不是一个PHP知识渊博的人，但这个链接可能有助于解决PHP问题-