0

我最近关注了本教程http://www.thebuzzmedia.com/html5-drag-and-drop-and-file-api-tutorial/但我无法让它工作。在 IE 中，它抱怨Error: Unable to get property 'addEventListener' of undefined or null reference，我不知道为什么。我在 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;
  }

我可能在这里遗漏了一些简单的东西，在此先感谢您的任何答案

4

0 回答 0