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

How to upload multiple image upload without submit button using ajax jquery?Can someone help my finding out whats wrong?

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

Here is the code

这是代码

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

1 个解决方案

#1

add id to this input for easier get value.

将id添加到此输入以便于获取值。

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

Includes values from this input to data:

包括此输入到数据的值：

$(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);
        }  
    }); 
});

Refer: http://blog.teamtreehouse.com/uploading-files-ajax

请参阅：http：//blog.teamtreehouse.com/uploading-files-ajax

#1