Question

我正在开发一个小型HTML文件API应用程序。此应用程序可以支持用户拖放文件和读取文件内容。但是，我发现我可以进行拖放，读取文件信息部分或使用HTML上传功能让用户上传文件并读取文件内容。

我只是希望用户可以将文件放入放置区域，应用程序可以读取其内容并显示在文本区域中。

我的问题是如何让应用程序支持同时拖放文件内容？先感谢您！

源代码：

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
    body 
    {
        font-size:18pt;
    }
    #filedrop 
    {
        width: 300px;
        height: 200px;
        color: Gray;
        border: 10px dashed #9a9a9a;
    }
</style>
<title>Reading a Text File</title>
<script type="text/javascript">
    function init() {
        var bHaveFileAPI = (window.File && window.FileReader);

        if (!bHaveFileAPI) {
            alert("This browser doesn't support the File API");
            return;
        }

         document.getElementById("filedrop").addEventListener("drop", onFilesDropped);
        document.getElementById("filedrop").addEventListener("dragover", onDragOver);
        document.getElementById("fileElem").addEventListener("change", onFileChanged);

    }

    function onFileChanged(theEvt) {
        var thefile = theEvt.target.files[0];
        console.log(thefile);

        // check to see if it is text
        if (thefile.type != "text/plain") {
            document.getElementById('filecontents').innerHTML = "No text file chosen";
            return;
        }

        var reader = new FileReader();

        reader.onload = function (evt) {
            var resultText = evt.target.result;
            document.getElementById('filecontents').innerHTML = resultText;
        }

        reader.readAsText(thefile);
    }

     function onDragOver(theEvt) {
        theEvt.stopPropagation();
        theEvt.preventDefault();
    }

    function onFilesDropped(theEvt) {
        theEvt.stopPropagation();
        theEvt.preventDefault();

        var files = theEvt.target.files;

        document.getElementById('filedata').innerHTML = "";

        for (var i = 0; i <= files.length; i++) {
            var fileInfo = "<p>File name: " + files[i].name + "; size: " + files[i].size + "; type: " + files[i].type + "</p>";
            document.getElementById('filedata').innerHTML += fileInfo;
        }
    }

    window.addEventListener("load", init);
</script>
</head>
<body>
<h1>Using Drag and Drop</h1>
<p>Drop files here: </p>
<div id="filedrop"></div>
<p>File Information: </p>
<div id="filedata"></div>
<h1>Reading File Data as Text</h1>
<form action="">
<label>Select a file: </label>
<input type="file" name="files" id="fileElem" />
</form>
<p>File contents: </p>
<textarea cols="80" rows="10" id="filecontents"></textarea>
</body>
</html>

Answer 1

嗯，之前已经提出过这个问题，它们包含了比使用JSFiddle更好的方法。我认为你应该使用它。链接到here

如何拖放HTML文件阅读器

1 个答案: