ä¸ä¼ å¾ç并å¨æµè§å¨çªå£ä¸æ¾ç¤º
问题描述:
æå·²ç»å®ç°äºå°å¾çä¸ä¼ å°æµè§å¨å¹¶æ¾ç¤ºä¸ºç¼©ç¥å¾ç代ç ãç¶åå®ä¹å¯ä»¥æå ¥ç»å¸åºåãä½æ¯å½æç¨chromeè¿è¡å®æ¶ï¼å®å¹¶æ²¡ææå¼çªå£æ¥ä¸ä¼ æ件ãé¦å ä¸ä¼ å¾çï¼ç¶åå建缩ç¥å¾ãä½å®ä¸éç¨äºChromeãä¸ä¼ å¾ç并å¨æµè§å¨çªå£ä¸æ¾ç¤º
è¿éæ¯æç代ç ï¼
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Drag Demo</title>
<link href="copy.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container">
<div style = "border:2px solid black;">
<canvas id = "canvas" style = "position:relative;width:300px;height:300px;top:0px;left:500px; border:2px solid black;" ondrop="dropIt(event);" ondragover="event.preventDefault();"> </canvas>
</div>
<div>
<input type="file" id="fileElem" accept="image/*" style="display:none" >
<div id="fileSelect" class="drop-area">Select some files</div>
</div>
<div id="thumbnail"></div>
</div>
<script type="text/javascript">
function dragIt(event) {
event.dataTransfer.setData("Text", event.target.id)
};
function dropIt(event) {
var theData = event.dataTransfer.getData("Text");
dt = document.getElementById(theData);
event.preventDefault();
var c = document.getElementById("canvas");
var ctx = c.getContext('2d');
ctx.drawImage(dt, 100, 0,dt.width,dt.height);
};
var count = 0;
var fileSelect = document.getElementById("fileSelect"),
fileElem = document.getElementById("fileElem");
fileElem.addEventListener("click",function(e){
var files = this.files
handleFiles(files)
},false)
fileSelect.addEventListener("click", function (e) {
fileElem.click();
e.preventDefault();
}, false);
function handleFiles(files) {
for (var i = 0; i < files.length; i++) {
var file = files[i];
var imageType = /image.*/;
if(!file.type.match(imageType)){
console.log("Not an Image");
continue;
}
var image = document.createElement("img");
var thumbnail = document.getElementById("thumbnail");
image.file = file;
thumbnail.appendChild(image)
var reader = new FileReader()
reader.onload = (function(aImg){
return function(e){
aImg.src = e.target.result;
};
}(image))
image.id = count;
count++;
image.draggable = true;
image.ondragstart = dragIt;
var ret = reader.readAsDataURL(file);
}
}
</script>
</body>
</html>
答
çæå¡å¨ä¸åªéè¿è¡ç代ç ï¼å®ä¼å·¥ä½ï¼
ä¸é¢ç代ç å¨Firefoxä¸å·¥ä½ï¼] â MJQ 2012-07-17 15:59:02
æ帮ä¸äºä½ ï¼å 为æå¨æçææºä¸ï¼ä½å°è¯è°è¯ä»£ç ãå¨æ¯è¡ä¹å使ç¨alertï¼ï¼æconsole.logï¼ï¼ï¼ççåªä¸ªé¨å没ææ§è¡ã â 2012-07-17 16:06:03
æå·²ç»è¯è¿äºï¼å½fileElem.clickï¼ï¼æ§è¡æ¶ï¼å®ä¼è¿å ¥äºä»¶ï¼å¹¶å¨Firefoxä¸æå¼ä¸ä¸ªçªå£æ¥éæ©æ件ãä½å¨é¬ï¼å®éµå¾ªç¸åï¼ä½çªå£ä¸æå¼æ件éæ©ï¼ â MJQ 2012-07-17 16:08:50