這是我前端：

$('body').on('change', '.add-btn',function(e){
    e.preventDefault();

    var id = $('.admin-upload-inline').length + 1;
    var removeBtn = $('<i class="admin-upload-remove material-icons">highlight_off</i>');
    var iconLayout = $('<div class="admin-upload-inline add-btn pointer" id="icon-layout-'+id+'">');
    var fileInput = $(
      '<input type="hidden" id="file'+id+'" name="icon[]" class="admin-upload" value="">'
    + '<img src="../images/30.png" id="pre'+id+'" class="admin-upload-review">');

    removeBtn.click(function() {
			$(this).fadeOut().parent().remove();
			var wrappers = $(".admin-upload-inline");
			if (wrappers.length > 1) {
				var newId = 1;
				wrappers.each(function(){
					renewId = "icon-layout-" + newId;
					$(this).attr("id",renewId);
					newId++;
				});
			}
		});

    if(id < 8){
      iconLayout.append(fileInput);
  		iconLayout.append(removeBtn);
  		$(".addend-display").append(iconLayout);
    }

     var reader = new FileReader();
     reader.onload = function(e) {
       $('#pre' + id).attr('src', e.target.result);
       $('#file' + id).attr('value', e.target.result);
     }

     reader.readAsDataURL(this.files[0]);

<div class="admin-upload-inline pointer">
        <input type="file" id="file1" name="icons[]" class="add-btn admin-upload" accept="image/jpeg, image/png, image/jpg">
        <img src="../images/30.png" id="pre1" class="admin-upload-review">
        <i class="material-icons upload_cover_icon admin-upload-icon-add">add_circle_outline</i>
      </div>

      <div class="addend-display">

      </div>

我的後端這樣接：

foreach ($_POST['icon'] as $value) {
      preg_match('/^(data:\s*image\/(\w+);base64,)/', $value, $result);
        $file_ext = '.'.$result[2];
        file_put_contents('../../images/product/'.md5().$file_ext, base64_decode(str_replace($result[1], '', $value)));
    }

為什麼他都只會是最後一張圖會保存到？
假設我上傳ＡＢＣ圖好了
他永遠只會儲存到 Ｃ圖？ （../../images/product/）
於是我試著印印看icon欄位，我發現我同時上傳ＡＢＣ圖，直接印出 $_POST['icon] 他好像他只會有一張圖？（一個base64的連結）
怎麼會這樣？