js中拖放图像的数组事件侦听器
Array event listener for drag n drop image in js
基于本教程,我将代码从id选择器修改为用于多个文件上传的类,没有js错误,没有中断,但代码现在似乎不起作用
代码有什么问题吗?
小提琴
感谢
<div class="filedroparea">DROP IMAGE HERE</div>
<img class="previewimage" alt="Preview Image"/>
<div class="showdroparea">Drop New Image</div>
<div class="filedroparea">DROP IMAGE HERE</div>
<img class="previewimage" alt="Preview Image"/>
<div class="showdroparea">Drop New Image</div>
<div class="filedroparea">DROP IMAGE HERE</div>
<img class="previewimage" alt="Preview Image"/>
<div class="showdroparea">Drop New Image</div>
if (window.FileReader) {
// Current browser supports drag and drop
var droparea = document.getElementsByClassName("filedroparea");
for(var i=0; i< droparea.length; i++){
droparea[i].addEventListener("dragenter", dragenter, false);
droparea[i].addEventListener("dragover", dragover, false);
droparea[i].addEventListener("drop", drop, false);
}
var showButton = document.getElementsByClassName("showdroparea");
for(var i=0; i< showButton.length; i++){
showButton[i].addEventListener("click", showarea, false);
}
}
else {
document.getElementsByClassName('filedroparea').innerHTML = 'Your browser does not support FileReader HTML5 API';
}
// Event callback functions
function dragenter(e) {
e.stopPropagation();
e.preventDefault();
}
function dragover(e) {
e.stopPropagation();
e.preventDefault();
}
function drop(e) {
e.stopPropagation();
e.preventDefault();
// Get list of dropped files
var dt = e.dataTransfer;
var images = dt.files;
//console.log(images);
// Reading first file
var image = images[0];
var reader = new FileReader();
for(var i=0; i< reader.length; i++){
reader[i].readAsDataURL(image);
reader[i].addEventListener("loadend", showPreview, false);
}
}
function showPreview(e, file){
var imageElement = document.getElementsByClassName('previewimage');
for(var i=0; i< imageElement.length; i++){
imageElement[i].src = this.result;
document.getElementsByClassName("filedroparea").style.display = 'none';
imageElement[i].style.display = 'block';
document.getElementsByClassName("showdroparea").style.display = 'block';
}
}
function showarea(e){
document.getElementsByClassName("filedroparea").style.display = 'block';
document.getElementsByClassName('previewimage').style.display = 'none';
document.getElementsByClassName("showdroparea").style.display = 'none';
}
html,body{margin:0, padding:0; text-align:center; background: #eee url('../images/bg.png'); font-family: arial,sans-serif; font-size: 14px;}
a{font-size: 12px; color: #666;}
.filedroparea{margin: 50px auto; width: 600px; height: 300px; border: 5px dashed #FF0066; text-align:center; line-height: 300px;text-shadow: 1px 1px 1px #ccc;}
.previewimage{display:none; margin:50px auto; max-width:600px; box-shadow: 0 2px 2px #aaa;}
.showdroparea{display:none; text-align: center; cursor: pointer; padding: 8px 0px; color: #fff; background: #5A8AFA; width: 150px; margin: auto; text-transform: uppercase; border-bottom: 2px solid #4A77E0;}
原始教程使用document.getElementById()返回DOM节点。
document.getElementsByClassName()返回多个DOM节点的数组。在切换到getElementsByClassName()之后,您需要循环遍历数组,并分别在每个元素上设置新的样式属性。试试这个:
function hideAll(elements) {
var length = elements.length;
var i;
for (i=0; i<length; i++) {
elements[i].style.display = 'none';
}
}
function showAll(elements) {
var length = elements.length;
var i;
for (i=0; i<length; i++) {
elements[i].style.display = 'block';
}
}
function showarea(e){
var filedropareas = document.getElementsByClassName("filedroparea");
var previewimages = document.getElementsByClassName('previewimage');
var showdropareas = document.getElementsByClassName("showdroparea");
showAll(filedropareas);
hideAll(previewimages);
hideAll(showdropareas);
}
相关文章:
- 将事件附加到对象/数组
- 算法:从数组(javascript/angular)中按当前日期获取上一个和下一个事件
- Javascript:OnChange事件,将数组变量传递给另一个函数
- 如何确定$(this)是否在单击事件的数组中
- 当从jquery的点击事件中的每个循环创建的数组到它之外时,它显示空白数组
- 如何在 keyup 事件上匹配数组中的字符串
- 使用事件更改数组的一个元素
- 正在尝试获取事件之外的更新数组的值
- 为什么不是't单击事件中返回的数组的总和
- 如何在地图框中的层数组中循环以侦听单击事件
- 将jQuery事件函数应用于新的Knockout.js数组元素
- Javascript事件处理程序总是被添加到数组中的最后一个对象
- 如何使用onclick事件中的函数,并使用循环对函数中数组中的函数进行计数,从而调用多个JavaScript函数
- 在提交 HTML 表单后从数组中提取数据(按键事件)
- 如何修改此代码,以便创建数组并将事件添加到数组中
- 如果用户靠近并触发特定事件,请检查位置数组
- 如何使用带有复选框的事件触发器访问 ID 数组
- 主干.js - 模型数组上的更改事件不会在元素更改时触发
- Jquery无限数量数组事件
- js中拖放图像的数组事件侦听器