前端用 append 製造多個 input與 base64，後端接每個 base64，但都只有一張會被保存？

Question

问题描述

前端

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

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

    var id = $('.admin-upload-inline').length + 1;
    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">');

      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]);

後端

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欄位，我發現我同時上傳ＡＢＣ圖，直接印出 print_r($_POST['icon]) 好像他只會有一個base64的連結
怎麼會這樣？

Answer 1

你可以直接打印 $_POST 看看 或者新增上传控件的时候， 手动指定 name="icon[1]" 的下标

Answer 2

应该是你表单提交的时候，本来就是只获取了一个，你看一下network，提交了写啥吧。