javascript单击时执行事件

Question

我有这个代码：

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

我正在关注这个方法：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]);
}

只需检查 files 是否为数组以及 [0] 元素是否有效。