使用javascript和工具栏在拖放上呈现图像。
使用javascript和工具栏在拖放上呈现图像。
提问于 2014-12-26 21:51:49
我试图在一个div中渲染多个图像，使用拖放技术.
但是我没有得到预期的结果，不管我尝试了什么，我都得到了重复的图像，并且name、size和type属性被覆盖。
编辑 Ok，我意识到为什么我会得到一个空的data数组。这是因为当时onload事件还没有结束，所以仍然没有可用的数据。
但现在我不知道如何解决注释中定义的问题，如何在加载所有文件时只呈现一次模板。
有人能给出一些线索，说明这些数据应该如何准备在调用后呈现吗？
js/filedrop.js
(function(){
"use strict";
// define the drop zone
var dropZone = document.getElementById("drop-zone");
// add a drag over event to the zone
dropZone.addEventListener("dragover", function(e){
e.preventDefault();
// add a hover class so we can see it's working
dropZone.setAttribute("class", "over");
}, false);
// on file drop grab all available image information
dropZone.addEventListener("drop", function(e){
"use strict";
e.preventDefault();
var
reader,
files = e.dataTransfer.files,
fileCount = files.length,
i;
// get the Handlebars template
var handlebarTemplate = document.getElementById("handlebar-template");
var template = Handlebars.compile(handlebarTemplate.innerHTML);
if(fileCount > 0){
var data = [], currObj = {};
for(i = 0; i < fileCount; i = i + 1){
var file = files[i];
reader = new FileReader();
// remove the hover class
dropZone.removeAttribute("class");
reader.onload = function(e){
currObj = {
name : file.name,
size : file.size,
type : file.type,
source: e.target.result
};
data.push(currObj);
// PROBLEM, how to load template once all files are loaded
// because leaving it like this will load some files multiple times
// also name, size and type attributes will be overwritten so I will get
// same attributes for all loaded images.
dropZone.innerHTML += ( template(data) );
};
// render the image as a data url
reader.readAsDataURL(file);
} //end for loop
//console.log(data); I got this! See above EDIT
} //end if
}, false); //end listener
})();index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Chapter 12</title>
<style type="text/css" media="screen">
#drop-zone {
min-height: 300px;
max-width: 300px;
padding: 15px;
border: 4px dashed #999;
}
#drop-zone img {
max-width: 100%;
display: block;
}
.over {
border-color: #333;
background: #ddd;
}
ul {
padding: 0;
list-style: none;
color: #333;
}
</style>
</head>
<body>
<div id="drop-zone">
<script id="handlebar-template" type="text/x-handlebars-temlate">
<div class="img-slot">
{{#each this}}
<img src="{{source}}" alt="{{name}}">
<ul>
<li>{{name}}</li>
<li>{{type}}</li>
<li>{{size}}</li>
</ul>
{{/each}}
</div>
</script>
</div><!-- /#drop-zone -->
<script src="bower_components/handlebars/handlebars.min.js"></script>
<script src="js/filedrop.js"></script>
</body>
</html>回答 1
Stack Overflow用户
回答已采纳
发布于 2014-12-27 17:36:34
经过一番调整和思考，我终于成功了。请参阅文件中的评论，以了解我是如何解决这个问题的.
(function(){
"use strict";
// define the drop zone
var dropZone = document.getElementById("drop-zone");
...
...
// on file drop grab all available image information
dropZone.addEventListener("drop", function(e){
"use strict";
e.stopPropagation();
e.preventDefault();
// get the Handlebars template instance
var handlebarTemplate = document.getElementById("handlebar-template"),
template = Handlebars.compile(handlebarTemplate.innerHTML);
// declare some variables
var reader,
files = e.dataTransfer.files,
i;
if(files.length > 0){
var data = [], f;
for(i = 0, f; f = files[i]; i++){
reader = new FileReader();
// have control over which file is being processed by
// wrapping it all into another anonymous function and
// passing `theFile` argument from loop iteration
reader.onload = (function(theFile){
return function(e){
var imgObj = {
name: theFile.name,
type: theFile.type,
size: theFile.size,
source: e.target.result
};
data.push(imgObj);
// check if all files loaded, so we can then handover to Handlebars.js
if (data.length == files.length){
renderTemplate();
}
}
})(f);
// render the image as a data url
reader.readAsDataURL(f);
} //end for loop
} //end if
// Handover data to Handlebars.js
function renderTemplate(){
dropZone.innerHTML += ( template(data) );
}
}, false); //end listener
})();页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/27662342
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号