如何使用ajax jquery上传多个图像而无需提交按钮上传？

Question

如何使用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> 

这是代码

<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> 

Answer 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