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(),&nbsp; &nbsp; file = input.files[0],&nbsp; &nbsp; fileType = file.type;fileReader.onload = function(){&nbsp; &nbsp; if(/^image/.test(fileType)){&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; }}fileReader.readAsDataURL(file);