如何使用ajax jquery上传多张图片上传而没有提交按钮？答案

【问题标题】：How to upload multiple image upload without submit button using ajax jquery?如何使用ajax jquery上传多张图片上传而没有提交按钮？
【发布时间】：2017-12-13 09:39:55
【问题描述】：

如何使用 ajax jquery 在没有提交按钮的情况下上传多个图片上传？有人可以帮我找出问题所在吗？

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />  
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">     </script>

这里是代码

  <body> 
    <input name="files[]" type="file" multiple />
    <input type="hidden" name="hiddenval" id="hiddenval" value="">
    <button id="upload" value="Upload" class="btn btn-success" />
  </body>
</html>

<script>
  $(document).on("click", "#upload", function() {
    var outputdata = [];

    $.ajax({
      url: "upload1.php",
      type: "POST",
       data: new Form(this),
      contentType: false,
      processData: false,
      success: function(files, data, xhr) {
        outputdata.push(files);
        $('#hiddenval').val(outputdata)
      }
    });
  });
</script>

【问题讨论】：

为什么要混合使用 Bootstrap CSS (3.3.6) 和 JS (3.3.7) 版本？
@RoryMcCrossan，我收到警告“警告：为路径中的 foreach() 提供的参数无效”
那是因为您提供了对FormData 构造函数的按钮（#upload 元素）的引用。它必须是 form 元素
@RoryMcCrossan，我已经更改了表单数据，仍然没有上传图片。
如果不看到您将其更改为什么，我们将无能为力。请编辑您的问题以显示更新后的代码。

标签： javascript php jquery ajax

【解决方案1】：

将 id 添加到此输入以便更轻松地获取值。

<input name="files[]" type="file" multiple id="files"/>

将此输入中的值包含到数据中：

$(document).on("click", "#upload", function() {
    var outputdata = [];
    var fileSelect = document.getElementById('files');
    var files = fileSelect.files;
    var formData = new FormData();
    // Loop through each of the selected files.
    for (var i = 0; i < files.length; i++) {
        var file = files[i];
        // Check the file type.
        if (!file.type.match('image.*')) {
            continue;
        }
        // Add the file to the request.
        formData.append('photos[]', file, file.name);
    }

    $.ajax({  
        url: "upload1.php",  
        type: "POST",  
        data: formData,  
        contentType: false,  
        processData:false,  
        success: function(files,data,xhr)  
        {           
           outputdata.push(files);
           $('#hiddenval').val(outputdata);
        }  
    }); 
});

参考：http://blog.teamtreehouse.com/uploading-files-ajax

【讨论】：

注意：我不确定使用.append 时是否需要第三个参数，我错过了它，一切都按预期工作。无论哪种方式，都是很好的答案。