AngularJS ng-file-upload 使用窗口作为放置区域
Posted
技术标签:
【中文标题】AngularJS ng-file-upload 使用窗口作为放置区域【英文标题】：AngularJS ng-file-upload use window as droparea 【发布时间】：2015-11-07 16:22:43 【问题描述】：是否可以将整个窗口用作droparea？
当然，我可以将 ngf-drop 属性附加到正文，但随后一些其他 html 元素覆盖，我不能将我的文件放在那里......否则我不能使用 DIV 附加这些属性并将其覆盖所有其他元素，因为没有其他内容是可点击的。
或者我怎样才能使用 vanilla js / css 实现这种行为？
【问题讨论】：
【参考方案1】：如果你将它添加到 body 或包含它应该工作的所有元素的 div 中，请确保 body 容器 div 是全尺寸并包含所有元素。仍然会在 body 或容器 div 上调用拖放事件。
示例：http://jsfiddle.net/w812qp1s/
<body ng-app="fileUpload" ng-controller="MyCtrl">
<div style="width:100%;height:100%" ngf-drop ngf-select ng-model="files" class="drop-box" ngf-drag-over-class="dragover" ngf-multiple="true" ngf-allow-dir="true"><div>Drop File:</div>
<div>No Drop File Div</div>
<ul>
<li ng-repeat="f in files" style="font:smaller">f.name</li>
</ul>Upload Log: <pre>log</pre>
</div>
</body>
【讨论】：
以上是关于AngularJS ng-file-upload 使用窗口作为放置区域的主要内容，如果未能解决你的问题，请参考以下文章
angularJs中上传图片/文件功能：ng-file-upload
为啥我会像在 ng-file-upload 示例使用代码中那样在 AngularJS $timeout 服务中包装一个函数，而不会延迟？
AngularJS ng-file-upload 使用窗口作为放置区域