图像文件上传拖放事件奥里利亚不工作

Question

我需要与拖放我的图片上传功能帮助。

我得到一个不错的箱子说我可以拖放图片，但我的控制台是说：

未捕获的ReferenceError：拖动没有定义未捕获的ReferenceError：降不定义未捕获的ReferenceError：未定义dragNdrop

当我点击并拖动图像。

我在想什么？

这里是我的代码示例：

HTML

<div class="form-group">
    <label for="imageInputFile">Ladda upp bild</label>
    <input ref="fileInput" type="file" id="imageInputFile" 
                click.delegate="previewImage()">
</div>
<strong>OR</strong>

<span class="dragBox">
    Drag and Drop image here
    <input type="file" onChange="dragNdrop(event)" ondragover="drag()" ondrop="drop()" id="imageInputFile" />
</span>

<div id="preview"></div>

JS

  dragNdrop(event) {
    let fileName = URL.createObjectURL(event.target.files[0]);
    let preview = document.getElementById("preview");
    let previewImg = document.createElement("img");
    previewImg.setAttribute("src", fileName);
    preview.innerHTML = "";
    preview.appendChild(previewImg);
  }
  drag() {
    document.getElementById('imageInputFile').parentNode.className = 'draging dragBox';
  }
  drop() {
    document.getElementById('imageInputFile').parentNode.className = 'dragBox';
  }

编辑HTML

<span class="dragBox">
    Click here or drag images here
    <input ref="fileInput" type="file" change.trigger="dragNdrop($event)" 
                dragover.delegate="drag()" drop.delegate="drop()" 
                id="imageInputFile" />
</span>

<div id="preview"></div>

我的图片上传定期按钮的使用添加一个新的形象，但是这似乎并没有这样的伎俩。

Answer 1

• 当您使用HTML属性，如onChange，ondragover等不delegate，它会寻找在全球范围drag功能。而不是在奥里利亚的视图模型绑定到该视图的实例。您需要使用delegate让奥里利亚知道你的类的实例必须使用。
• 你必须在你的HTML一样id两个元素。 getElementById('imageInputFile')很可能得到错误的元素。不知道为什么你有一个类型input用于预览图像的file，但你可以把它改成一个按钮。
• 您需要添加上传逻辑drop为好。我建议把这个拖放到span，因为它覆盖了要删除的区域。 change文件时，您的输入将不会触发任何drop。
• 你并不需要添加类和属性src手动使用DOM API集。例如，您可以将isDragging属性添加到您的类。在此基础上布尔属性，在draging类设置为span。你可以在里面<img src.bind="imageSrc" />添加<div id="preview"></div>。并设置imageSrc函数内dragNdrop财产。

类：

dragNdrop(event) {
   const self = this;
   let fileName = URL.createObjectURL(event.target.files[0]);
   self.imageSrc = fileName; // that's it
}

drag() {
  const self = this;
  self.isDragging = true;
}

drop(event) {
  const self = this;
  self.isDragging = false;
  self.dragNdrop(event);
}

HTML：

<button type="button" click.delegate="previewImage()">Preview</button>
<span class="dragBox ${isDragging ? 'draging' : ''}" 
      dragover.delegate="drag()" 
      drop.delegate="drop($event)">

    Click here or drag images here
    <input id="imageInputFile" type="file" change.trigger="dragNdrop($event)" />
</span>

<div id="preview">
   <img show.bind="imageSrc" src.bind="imageSrc" />
</div>