这个例子几乎完成了我想在 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>
关于javascript - AngularJS 文件拖放指令,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14712463/