onchange 上傳照片後 append 產生一個區塊？

Question

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


    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);
    $(".addend-display").append(iconLayout);

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

      console.log(e.target.result);
      reader.readAsDataURL($('#file'+id));
    }

<div class="admin-upload-inline add-btn pointer">
        <input type="file" id="file1" name="icon[]" class="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>

請問如何當我按下 add-btn 後，圖片能夠經由 FileReader 產生的base64直接丟到我生成過的 隱藏欄位和 img裡面？我發現我都抓不到 data64.....

補充！

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

怎麼都下載不到全部的 base64，都是只有抓到最後一個？

Answer 1

readAsDataURL应该在onload事件外面

var fileReader = new FileReader(),
    file = input.files[0],
    fileType = file.type;
fileReader.onload = function(){
    if(/^image/.test(fileType)){
        
    }
}
fileReader.readAsDataURL(file);