Javascript выполнить событие на клик

Question

У меня есть этот код:

<input type="file" id="imgLoader"> 
<button type="button" class="btn btn-primary" id="add-img">Add</button> 

Я следовал этой Approch: How to upload an image to a canvas with Fabric.js?

document.getElementById('imgLoader').onchange = function handleImage(e) { 
var reader = new FileReader(); 
    reader.onload = function (event){ 
    var imgObj = new Image(); 
    imgObj.src = event.target.result; 
    imgObj.onload = function() { 
     var image = new fabric.Image(imgObj); 
     image.set({ 
      angle: 0, 
      padding: 10, 
      cornersize:10, 
      height:110, 
      width:110, 
     }); 
     canvas.centerObject(image); 
     canvas.add(image); 
     canvas.renderAll(); 
    } 
    } 
    reader.readAsDataURL(e.target.files[0]); 
} 

Можно ли выполнить это событие только после нажатия пользователя на кнопке?

Answer 1

Не имеет смысла, когда вы нажимаете кнопку, файл еще не выбран, поэтому его нельзя загрузить. Он просто запускает окно браузера файлов.

$('#imgLoader').on('click', function(){ 
 
    $('#results').html('I fired'); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="file" id="imgLoader"> 
 
<pre id="results"></pre>

Если вы хотите загрузить файл в другой кнопки вы можете сделать это:

document.getElementById('button').onclick = function handleImage(e) { 
var reader = new FileReader(); 
    reader.onload = function (event){ 
    var imgObj = new Image(); 
    imgObj.src = event.target.result; 
    imgObj.onload = function() { 
     var image = new fabric.Image(imgObj); 
     image.set({ 
      angle: 0, 
      padding: 10, 
      cornersize:10, 
      height:110, 
      width:110, 
     }); 
     canvas.centerObject(image); 
     canvas.add(image); 
     canvas.renderAll(); 
    } 
    } 
    reader.readAsDataURL(document.getElementById('imgLoader').files[0]); 
} 

Просто проверьте, если файлы является массивом, и если [0] элемент действует.