點擊時執行javascript事件

Question

我有以下代碼：

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

我正在遵循以下方法： 如何使用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]元素是否有效。