Question

我正在尝试像http://drag-2-share.appspot.com一样创建新网页。我复制了源代码并在本地进行了测试，以便更多地了解他们是如何开发它的，但是当我保存到我的本地时它根据网页不起作用。据我所知，它应保存在列表中。我从来没有做过javascript，所以如果有人可以帮助我，请欣赏。下面是代码，您可以保存在本地并进行测试。

代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Drag2Share</title>
</head>
<body>
  <div id="drop_zone">
    <select id="fileSelect"></select>
    <button onclick="handleView();">View</button>
    <button onclick="handleDownload();">Download</button>
    <button onclick="updateSelector();">Update</button>
    <table>
      <tr>
        <td id="drop_text">Drop File(s) Here</td>
      </tr>
    </table>
  </div>
</body>
<script type="text/javascript">
    function handleFileSelect(evt) {
        evt.stopPropagation();
        evt.preventDefault();
        var files = evt.dataTransfer.files; // FileList object
        var finished;
        for ( var i = 0, file; file = files[i]; i++) {
            var request = new XMLHttpRequest();
            request.open('POST', '/files/' + file.name);
            request.onreadystatechange = function() {
                if (!files[i + 1] && !finished) {
                    window.alert("Upload Completed");
                    finished = true;
                    updateSelector();
                }
            }
            request.send(file);
        }
        document.getElementById('drop_zone').className = "";
    }

    function handleDragOver(evt) {
        evt.stopPropagation();
        evt.preventDefault();
        document.getElementById('drop_zone').className = "over";
    }

    function handleLeave(evt) {
        evt.stopPropagation();
        evt.preventDefault();
        document.getElementById('drop_zone').className = "";
    }

    function handleView() {
        var select = document.getElementById("fileSelect");
        window.open("files/" + select.options[select.selectedIndex].value);
    }

    function handleDownload() {
        var select = document.getElementById("fileSelect");
        window.location += "files/"
                + select.options[select.selectedIndex].value + "?download";
    }

    function updateSelector() {
        var select = document.getElementById("fileSelect");
        while (select.options.length > 0) {
            select.remove(0);
        }
        var request = new XMLHttpRequest();
        request.open('GET', '/info', false);
        request.send(null);
        var json = eval(request.responseText);
        for ( var i = 0; i < json.length; i++)
            AddSelectOption(select, json[i], json[i], true);
        select.selectedIndex = 0;
    }

    function AddSelectOption(selectObj, text, value, isSelected) {
        if (selectObj != null && selectObj.options != null)
            selectObj.options[selectObj.options.length] = new Option(text,
                    value, false, isSelected);
    }

    // Setup the dnd listeners.
    var dropZone = document.getElementById('drop_zone');
    dropZone.addEventListener('dragover', handleDragOver, false);
    dropZone.addEventListener('dragleave', handleLeave, false);
    dropZone.addEventListener('drop', handleFileSelect, false);

    // Initialize file selector
    updateSelector();
</script>
<style type="text/css">
#drop_zone {
  width: 100%;
  height: 100%;
}

#drop_zone.over {
  background: gray;
}

#drop_text {
  text-align: center;
  vertical-align: middle;
}

html,body,table {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
}
</style>
</html>

Answer 1

除非您还编写与该页面关联的服务器端代码，否则该代码将无法完全运行（尤其是上载文件代码）。 JavaScript没有任何问题（毕竟你从工作站点复制了它）。它只是缺少服务器端代码。

Answer 2

正如Nikhil所说，缺少服务器端代码，

我可能会开始在这里http://www.w3schools.com/php/php_file_upload.asp

Javascript - 代码无效

2 个答案: