Append generates a region after onchange uploads photos?

$("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) {
      $("-sharppre" + id).attr("src", e.target.result);
      $("-sharpfile" + id).attr("value", e.target.result);

      console.log(e.target.result);
      reader.readAsDataURL($("-sharpfile"+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>

after I press add-btn, how can the base64 generated by FileReader be transferred directly to the Tibetan bits and img faces that I have generated? I realized that I couldn"t even catch data64.

Chong Chong!

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

readAsDataURL should be outside the onload event

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