Question

我最近关注了这个教程http://www.thebuzzmedia.com/html5-drag-and-drop-and-file-api-tutorial/，我无法让它发挥作用。在IE中它抱怨错误：无法获取未定义或空引用的属性'addEventListener'，我不知道为什么。我在chrome中尝试了这个并且没有错误，但是，拖放不起作用。这是我的html文件

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title></title>
<link rel="stylesheet" type="text/css" href="../Styles/dndimg.css"/>
<link rel="stylesheet" type="text/css" href="../Styles/jquery-ui-1.8.1.custom.css"/>
<script src="http://www.google.com/jsapi?key=ABQIAAAADYbHHQrNWPElNtE4hn2g1hQhn5tTlmnhbGVHENfXgw8ik0kvARSWpfuAdtdt1KqinQpUokxB7SpcsQ"
        type="text/javascript"></script>
<script type="text/javascript">
    google.load("jquery", "1");
    google.load("jqueryui", "1");
</script>
<script type="text/javascript" src="../Scripts/dndimg.js"></script>
</head>
<body>
<div id="dropbox"><span id="droplabel">Drop file here...</span>
<div id="progressbar"></div>
</div>

<br/>
<img id="preview" src="" alt="[ preview will display here ]"/>
</body>
</html>

和js文件：

    $(document).ready(function () {
var dropbox = document.getElementById("dropbox")

// init event handlers
$("#dropbox").get(0).addEventListener("dragenter", dragEnter, false)
$("#dropbox").get(0).addEventListener("dragexit", dragExit, false)
$("#dropbox").get(0).addEventListener("dragover", dragOver, false)
$("#dropbox").get(0).addEventListener("drop", dropAction, false);

// init the widgets
$("#progressbar").progressbar();
});

  function dragEnter(evt) {
evt.stopPropagation();
evt.preventDefault();
  }

 function dragExit(evt) {
evt.stopPropagation();
evt.preventDefault();
 }

  function dragOver(evt) {
evt.stopPropagation();
evt.preventDefault();
   }

  function drop(evt) {
evt.stopPropagation();
evt.preventDefault();

var files = evt.dataTransfer.files;
var count = files.length;

// Only call the handler if 1 or more files was dropped.
if (count > 0)
    handleFiles(files);
   }


  function handleFiles(files) {
var file = files[0];

document.getElementById("droplabel").innerHTML = "Processing " + file.name;

var reader = new FileReader();

// init the reader event handlers
reader.onprogress = handleReaderProgress;
reader.onload = handleReaderLoadEnd;

// begin the read operation
reader.readAsDataURL(file);
  }

  function handleReaderProgress(evt) {
if (evt.lengthComputable) {
    var loaded = (evt.loaded / evt.total);

    $("#progressbar").progressbar({ value: loaded * 100 });
}
 }

  function handleReaderLoadEnd(evt) {
$("#progressbar").progressbar({ value: 100 });

var img = document.getElementById("preview");
img.src = evt.target.result;
  }

这可能是我在这里很简单的事情，提前感谢任何答案

在asp.net中使用html5拖放

0 个答案: