點擊提交後，使用AJAX逐個上傳多個圖像

我試圖使用ajax和FormData Object上傳多個圖像。我遇到的問題是該腳本只上傳1張圖片，並且與其他圖片無關。點擊提交後，使用AJAX逐個上傳多個圖像

，該腳本只能在Chrome

這裏使用的是腳本JS：

(function() { 
    var count = 0; 

    function showUploadedItem(source,index) { 
     var list = $("#image-list"); 
     list.append("<li><img class='" + count + "' src=''></li>"); 
     $("." + count + "").attr("src",source); 
     count++; 
    } 

    $('[type="file"]').change(function() { 
     var file = this.files; 

     $.each(file, function(i, filename) { 
      reader = new FileReader(); 
      reader.onloadend = function (e) { 
       showUploadedItem(e.target.result, filename.name); 
      }; 

      reader.readAsDataURL(filename); 
     }); 
    }); 

$('button').click(function() {  

    var files = $("[type='file']")[0].files; 

    $.each(files, function(i, file) { 

     var formdata = new FormData(); 
     formdata.append('images', file.name, file); 

     console.log(formdata); 

     $.ajax({ 
      url :"up.php", 
      data:formdata, 
      type:"POST", 
      contentType: false, 
      processData: false, 
     }); 
    }); 
}); 
}());

在PHP我有這樣的：

<?php 
    move_uploaded_file($_FILES["images"]["tmp_name"], "img/" . $_FILES['images']['name']); 
?>

我修改了一下代碼，因爲我發現問題，但現在當我提交圖像時，我遇到了PHP限制文件上傳的問題，表單數據沒有一個接一個地上傳文件。

EDIT2：我發現的解決方案是把每個循環放在click事件中，並在每個循環內放入ajax調用。

來源

2014-01-16 abaracedo

記住'formdata'確實對IE瀏覽器的工作，我建議你用隱藏的iframe方法http://blog.w3villa.com去/ programming/upload-image-without-submitting-form-works-on-all-browsers/ –

它只會用於鉻合金 – abaracedo

你想一次全部提交還是一個一個提交？ – pocesar

FormData只接受一個文件而不是文件列表。在你的代碼file實際上是一個FileList，filename是文件

formdata.append("images[]", filename);

來源

2014-01-17 13:06:49 Musa

我試過了，但是當我選擇30張圖片上傳時，我點擊提交PHP只上傳20張圖片，這是php.ini文件中存在的限制。現在，我發現它是創建一個新的FormData對象到我在Click函數中創建的每個循環中的獨特解決方案，但問題是如果我將1000個圖像提交，將會執行1000個Ajax調用... – abaracedo

@Bultack有你聽說過FTP或SSH？ – Musa

FTP是的，SSH的東西，但我從來沒有用過它。爲什麼？ – abaracedo

點擊提交後，使用AJAX逐個上傳多個圖像

回答

相關問題