AngularJS文件拖放指令
AngularJS file drag and drop in directive
这个例子几乎完成了我想在Angular-js:HTML5 File API中移植的内容。
我一直试图在谷歌上搜索一些指令的例子,但我发现旧的例子大量使用DOM,或者不是为Angular 1.0.4编写的。
基本上这是纯js代码:
var holder = document.getElementById('holder'),
state = document.getElementById('status');
if (typeof window.FileReader === 'undefined') {
state.className = 'fail';
} else {
state.className = 'success';
state.innerHTML = 'File API & FileReader available';
}
holder.ondragover = function () { this.className = 'hover'; return false; };
holder.ondragend = function () { this.className = ''; return false; };
holder.ondrop = function (e) {
this.className = '';
e.preventDefault();
var file = e.dataTransfer.files[0],
reader = new FileReader();
reader.onload = function (event) {
console.log(event.target);
holder.style.background = 'url(' + event.target.result + ') no-repeat center';
};
console.log(file);
reader.readAsDataURL(file);
return false;
};
我能想到的唯一可能的方法是创建一个执行的指令
edo.directive('fileDrag', function () {
return {
restrict: 'A',
link: function (scope, elem) {
elem.bind('ondrop', function(e){
e.preventDefault();
var file = e.dataTransfer.files[0], reader = new FileReader();
reader.onload = function (event) {
console.log(event.target);
holder.style.background = 'url(' + event.target.result + ') no-repeat center';
};
console.log(file);
reader.readAsDataURL(file);
return false;
});
}
};
});
然而(1)它不起作用,(2)在我修复它之前,我想知道是否存在某种东西,或者我做得是否正确,
非常感谢任何提示或帮助。
要将注释合并为答案,请将ondrop
更改为drop
,添加e.stopPropagation()
,将holder
更改为elem
。
edo.directive('fileDrag', function () {
return {
restrict: 'A',
link: function (scope, elem) {
elem.bind('drop', function(e){
e.preventDefault();
e..stopPropagation();
var file = e.dataTransfer.files[0], reader = new FileReader();
reader.onload = function (event) {
console.log(event.target);
elem.style.background = 'url(' + event.target.result + ') no-repeat center';
};
console.log(file);
reader.readAsDataURL(file);
return false;
});
}
};
});
我也在做类似的事情,下面是我的工作解决方案:
HTML
app.directive("dropzone", function() {
return {
restrict : "A",
link: function (scope, elem) {
elem.bind('drop', function(evt) {
evt.stopPropagation();
evt.preventDefault();
var files = evt.dataTransfer.files;
for (var i = 0, f; f = files[i]; i++) {
var reader = new FileReader();
reader.readAsArrayBuffer(f);
reader.onload = (function(theFile) {
return function(e) {
var newFile = { name : theFile.name,
type : theFile.type,
size : theFile.size,
lastModifiedDate : theFile.lastModifiedDate
}
scope.addfile(newFile);
};
})(f);
}
});
}
}
});
div[dropzone] {
border: 2px dashed #bbb;
border-radius: 5px;
padding: 25px;
text-align: center;
font: 20pt bold;
color: #bbb;
margin-bottom: 20px;
}
<div dropzone>Drop Files Here</div>
防止默认事件,并从原始事件中获取文件。所有这些都可以在指令中实现。您应该传递函数,以便在文件拖放时使用属性文件。在拖动时,"draging"类也被添加到dropzone元素中。在视图中,它看起来像这样:
<div file-dropzone on-file-drop="myFunction">This is my dropzone </div>
指令:
function fileDropzoneDirective() {
return {
restrict: 'A',
link: fileDropzoneLink
};
function fileDropzoneLink($scope, element, attrs) {
element.bind('dragover', processDragOverOrEnter);
element.bind('dragenter', processDragOverOrEnter);
element.bind('dragend', endDragOver);
element.bind('dragleave', endDragOver);
element.bind('drop', dropHandler);
function dropHandler(angularEvent) {
var event = angularEvent.originalEvent || angularEvent;
var file = event.dataTransfer.files[0];
event.preventDefault();
$scope.$eval(attrs.onFileDrop)(file);
}
function processDragOverOrEnter(angularEvent) {
var event = angularEvent.originalEvent || angularEvent;
if (event) {
event.preventDefault();
}
event.dataTransfer.effectAllowed = 'copy';
element.addClass('dragging');
return false;
}
function endDragOver() {
element.removeClass('dragging');
}
}
}
相关文章:
- EaseJS拖放;放下(动画CC)电影剪辑的鼠标坐标
- 为什么HTML5拖放的目标是孩子?(可排序列表)
- HTML/CSS-用于拖放的全页面覆盖
- Rubaxa可与聚合物进行排序/拖放不起作用,具体取决于显示器:
- dblclick事件是在jquery拖放后触发的
- 无法进行拖放以使用本地存储
- 如何使用Java脚本创建提交按钮's的拖放功能
- Chrome原生拖放相对容器并不能正确渲染重影
- 如何在Javascript中创建排序、拖放多级列表
- html5拖放文件-在提交整个表单时上传
- 在jQuery UI中获取ul和li值,拖放即可排序
- html5拖放确定拖动项目的来源
- 我使用什么语言来创建像Webly这样的拖放功能
- HTML5拖放;Drop-使用jQuery处理事件
- 使用jquery拖放图像
- HTML5拖放访问属性
- D3 使用角度拖放指令
- 使用指令在 1000 条记录上的两个表之间进行角度拖放
- AngularJS文件拖放指令
- Angular js 拖放 - 传递$index指令