如何制作拖放式 HTML 文件阅读器

Posted

技术标签:

【中文标题】如何制作拖放式 HTML 文件阅读器【英文标题】：How to make a drag and drop HTML file reader 【发布时间】：2016-12-18 13:57:23 【问题描述】：

我正在开发一个小型 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>

【问题讨论】：

【参考方案1】：

嗯，这个问题之前已经被问过，他们包括比使用 JSFiddle 更好的方法。我认为您应该改用它。链接是here

【讨论】：

如果有人不想使用插件怎么办？

以上是关于如何制作拖放式 HTML 文件阅读器的主要内容，如果未能解决你的问题，请参考以下文章

HTML5 拖放API与Vue.js实战

.net的拖放文件上传插件？

“FBReader”如何在 epub 中对 html 文件进行分页

如何开始制作 C# RSS 阅读器？

(ComputerCraft) (minecraft version 1.7.10) (question) 制作语言文件阅读器

html5 文件阅读器 - 我如何手动创建文件列表？