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

這是代碼

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

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

如何使用ajax jquery上傳多個圖像上傳而不提交按鈕？

問題描述

1 個解決方案

解決方案1
2 2017-12-13 10:00:08

如何使用ajax jquery上傳多個圖像上傳而不提交按鈕？

問題描述

1 個解決方案

解決方案1 2 2017-12-13 10:00:08

解決方案1
2 2017-12-13 10:00:08