如何製作拖放HTML文件閱讀器

我正在研究一個小型HTML文件API應用程序。此應用程序可以支持用戶拖放文件並讀取文件內容。但是，我發現我可以通過拖放，讀取文件信息部分或使用HTML上傳功能讓用戶上傳文件並讀取文件內容。如何製作拖放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>

來源

2016-08-11 Zichen Ma

嗯，這個問題已經被問過，他們包括不是使用的jsfiddle更好的方法。我認爲你應該使用它。鏈接到它here

來源

2016-08-11 18:20:12

如何製作拖放HTML文件閱讀器

回答

相關問題