javascript - 图像文件上传的拖放事件在 Aurelia 中不起作用
问题描述
我需要有关拖放图像上传功能的帮助。
我得到一个不错的盒子,说我可以拖放图像,但我的控制台说:
未捕获的引用错误:未定义拖动未捕获的引用错误 :未定义拖放未捕获的 引用错误:未定义拖动Ndrop
当我单击并拖动图像时。
我错过了什么?
这是我的代码示例:
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>
我用于图像上传的常规按钮可以添加新图像,但这似乎不起作用。
解决方案
当您使用 HTML 属性(如
onChange
等ondragover
而不使用delegate
)时,它将drag
在全局范围内查找函数。而不是在绑定到该视图的 aurelia 视图模型的实例中。您需要使用delegate
让 aurelia 知道必须使用您的类的实例。id
您的 HTML 中有两个相同的元素。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>
推荐阅读
- python - 将具有嵌套列表的列转换为以第一个元素作为列名的列
- java - Netflix Eureka 错误:com.netflix.discovery.shared.transport.TransportException:无法在任何已知服务器上执行请求
- javascript - 如何获得“未过滤”的数组项?
- visual-studio-code - 如何在 vscode 语法中的范围匹配后隔离尾随文本的范围
- exception - 在 Kotlin 中指示方法不会引发异常的注解
- regex - 使用正则表达式显示重复字符串
- javascript - 如何使用 vuetify 向下滚动到页面底部
- visualvm - 将 VisualVM 与 AdoptOpenJDK 和 OpenJ9 一起使用
- c# - 如何使用 ClickOnce 创建静默安装程序
- angular - 为什么 subscribe() 不起作用但模板中的 aync 起作用?