0

我已经实现了一个代码，其中图像被上传到浏览器并显示为缩略图。然后它也可以被拖到画布区域中。但是当我在 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>
4

1 回答 1

-1

只需在服务器上运行代码即可！

于 2012-09-10T15:06:13.037 回答