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]);
}

检查文件是否为数组以及[0]元素是否有效。

javascript在点击时执行事件

1 个答案: