AngularJS文件拖放在指令 [英] AngularJS file drag and drop in directive
本文介绍了AngularJS文件拖放在指令的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
这个例子确实pretty很多东西，我想端口角JS： HTML5文件API 。
我一直在试图给谷歌的指令，但是我发现老例子，做大规模使用DOM或者没有为角1.0.4写的一些例子。
基本上，这是纯粹的JS code：
VAR持有人=的document.getElementById（'持有人'），
状态=的document.getElementById（'状态'）;如果（typeof运算window.FileReader ==='不确定'）{
state.className ='失败';
}其他{
state.className =成功;
state.innerHTML文件API＆放=;可用的FileReader';
}holder.ondragover =功能（）{this.className ='悬停';返回false; };
holder.ondragend =功能（）{this.className ='';返回false; };
holder.ondrop =功能（E）{
this.className ='';
亦即preventDefault（）; var文件= e.dataTransfer.files [0]
读者=新的FileReader（）;
reader.onload =函数（事件）{
的console.log（event.target）;
holder.style.background ='URL（'+ event.target.result +'）不重复中心;
};
的console.log（文件）;
reader.readAsDataURL（文件）; 返回false;
};
我能想到的唯一可能的方式是创建一个指令，确实
edo.directive（'fileDrag'，函数（）{
返回{
限制：'A'，
链接：功能（范围，ELEM）{
elem.bind（'ondrop'，函数（E）{
亦即preventDefault（）;
var文件= e.dataTransfer.files [0]，读者=新的FileReader（）;
reader.onload =函数（事件）{
的console.log（event.target）;
holder.style.background ='URL（'+ event.target.result +'）不重复中心;
};
的console.log（文件）;
reader.readAsDataURL（文件）; 返回false;
}）;
}
};
}）;
但（1）它没有工作，（2）之前，我修复它，我想知道的东西存在，或者如果我正确地做这件事，
任何提示或帮助是非常AP preciated。
解决方案
要巩固注释到一个答案，变化 ondrop 到降添加 e.stopPropagation（），将架到 ELEM 。
edo.directive（'fileDrag'，函数（）{
返回{
限制：'A'，
链接：功能（范围，ELEM）{
elem.bind（'砸'，函数（E）{
亦即preventDefault（）;
e..stopPropagation（）;
var文件= e.dataTransfer.files [0]，读者=新的FileReader（）;
reader.onload =函数（事件）{
的console.log（event.target）;
elem.style.background ='URL（'+ event.target.result +'）不重复中心;
};
的console.log（文件）;
reader.readAsDataURL（文件）; 返回false;
}）;
}
};
}）;
我在做相似的东西在这里是我工作的解决方案：
HTML
\r
\r\r
\r app.directive（悬浮窗功能（）{\r
返回{\r
限制：A，\r
链接：功能（范围，ELEM）{\r
elem.bind（'降'，函数（EVT）{\r
evt.stopPropagation（）;\r
。EVT preventDefault（）;\r
\r
var中的文件= evt.dataTransfer.files;\r
对于（VAR I = 0，F; F =文件[i];我++）{\r
VAR读卡器=新的FileReader（）;\r
reader.readAsArrayBuffer（F）;\r
\r
reader.onload =（函数（theFile）{\r
复位功能（E）{\r
VAR NEWFILE = {名称：theFile.name，\r
类型：theFile.type，\r
大小：theFile.size，\r
lastModifiedDate：theFile.lastModifiedDate\r
}\r
\r
scope.addfile（NEWFILE）;\r
};\r
}）（F）;\r
}\r
}）;\r
}\r
}\r
}）; \r
DIV [悬浮窗] {\r
边界：2px的#bbb破灭;\r
边界半径：5像素;\r
填充：25像素;\r
文本对齐：中心;\r
字体：20pt大胆;\r
颜色：#bbb;\r
保证金底：20像素;\r
} \r
＆LT; DIV悬浮窗＆GT;文件拖放此处＆lt; / DIV＆GT; \r
This example does pretty much what I would like to port in Angular-js: HTML5 File API.
I have been trying to google some example of directives however I found old example that do massive use of DOM or are not written for Angular 1.0.4.
Basically this is the pure js code:
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;
};
The only possible way I can think of is creating a directive that does
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;
});
}
};
});
However (1) it did not work, (2) before I fix it I would like to know if something exists or if I am doing it properly,
Any hint or help is very much appreciated.
解决方案
To consolidate the comments into an answer, change ondrop to drop, add e.stopPropagation(), change holder to 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;
});
}
};
});
I was doing something similar and here is my working solution:
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>
这篇关于AngularJS文件拖放在指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
