如何拖放HTML文件閱讀器

Question

我正在開發一個小型的HTML文件API應用程序。 此應用程序可以支持用戶拖放文件和讀取文件內容。 但是，我發現我可以進行拖放，讀取文件信息部分或使用HTML上傳功能讓用戶上傳文件並讀取文件內容。

請看這里的例子： https ： //jsfiddle.net/tqcuor5g/

我只是希望用戶可以將文件放入放置區域，應用程序可以讀取其內容並顯示在文本區域中。

我的問題是如何讓應用程序支持同時拖放文件內容？ 先感謝您！

源代碼：

<!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更好的方法。 我認為你應該使用它。 鏈接到這里

如何拖放HTML文件閱讀器

問題描述

1 個解決方案

解決方案1
0 2016-08-11 18:20:12

如何拖放HTML文件閱讀器

問題描述

1 個解決方案

解決方案1 0 2016-08-11 18:20:12

解決方案1
0 2016-08-11 18:20:12