끌어서 놓기 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 파일 판독기를 만드는 방법

답변

관련 문제