끌어서 놓기로 파일 업로드가 불안정합니다.

Question

끌어서 놓기 업 로더를 만들고 있는데 base64를 사용하여 숨겨진 필드를 사용하여 서버에 데이터를 보내고 있습니다. (파일은 삭제되는 즉시가 아니라 나중에 전송됩니다.)

작은 이미지 파일과 텍스트 파일을 테스트하는 것은 효과적이지만 20MB의 압축 파일 또는 2MB의 WAV를 시도하면 전체가 불안정 해집니다. Google 크롬이 작동하지 않거나 빈 출력 상자를 표시하고 파이어 폭스가 오래 걸려 결국 base64 문자열을 표시합니다. IE는 실제로 한 번 작동하며 문자열을 가장 빠르지 만 여전히 용납 할 수없는 대기 시간으로 표시합니다.

내 코드가 비효율적입니까 아니면 다른 것입니까?

<div id="drop_zone">Drop files here</div> 
<input name="filebox" type="text" id="filebox" size="300"> 
<output id="list"></output> 

<script> 
function handleFileSelect(evt) { 
evt.stopPropagation(); 
evt.preventDefault(); 

var filelist = evt.dataTransfer.files; // FileList object. 
file = filelist[0]; 
var reader = new FileReader() 
reader.onload = function(e) { 
document.getElementById('filebox').value = e.target.result; 
} 
reader.readAsDataURL(file) //readAsdataURL 
} 

function handleDragOver(evt) { 
evt.stopPropagation(); 
evt.preventDefault(); 
evt.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy. 
} 


var dropZone = document.getElementById('drop_zone'); 
dropZone.addEventListener('dragover', handleDragOver, false); 
dropZone.addEventListener('drop', handleFileSelect, false); 
</script> 

이 테스트 페이지가 라이브입니다 : 여기

내 코드입니다 http://www.tabbicat.info/local/propellor/drop.html

Answer 1

좋아, 나는 라이브 링크 및 html5rocks에서 사용할 수있는 동일한 데모를했는데, 모두 약 2했다 23Mb 파일의 경우 초입니다. 그런 다음 jsfiddle에서 정확한 코드를 만들려고했지만 어떤 이유로 드래그 앤 드롭이 작동하지 않았습니다. 그래서 대신 파일 선택기 메서드를 사용했습니다. 다시 말하지만 파일을 읽는 데 약 2 초가 걸렸습니다. 내가 생각할 수있는 것 중 하나가 부족하거나 뭔가 HDD 부족 전송 속도와 같은 컴퓨터 메모리 문제가있을 수 있다는 것입니다. 또는 브라우저에 드롭 코드를 드래그하는 데 문제가있을 수 있습니다. :/어쨌든

, 당신은 나의 jsfiddle

#progress_bar { 
    margin: 10px 0; 
    padding: 3px; 
    border: 1px solid #000; 
    font-size: 14px; 
    clear: both; 
    opacity: 0; 
    -moz-transition: opacity 1s linear; 
    -o-transition: opacity 1s linear; 
    -webkit-transition: opacity 1s linear; 
} 
#progress_bar.loading { 
    opacity: 1.0; 
} 
#progress_bar .percent { 
    background-color: #99ccff; 
    height: auto; 
    width: 0; 
} 

<input type="file" id="files" name="file" /> 
<button onclick="abortRead();">Cancel read</button> 
<div id="progress_bar"> 
    <div class="percent">0%</div> 
</div> 

var reader; 
var progress = document.querySelector('.percent'); 

function abortRead() { 
    reader.abort(); 
} 

function errorHandler(evt) { 
    switch (evt.target.error.code) { 
     case evt.target.error.NOT_FOUND_ERR: 
      alert('File Not Found!'); 
      break; 
     case evt.target.error.NOT_READABLE_ERR: 
      alert('File is not readable'); 
      break; 
     case evt.target.error.ABORT_ERR: 
      break; // noop 
     default: 
      alert('An error occurred reading this file.'); 
    }; 
} 

function updateProgress(evt) { 
    // evt is an ProgressEvent. 
    if (evt.lengthComputable) { 
     var percentLoaded = Math.round((evt.loaded/evt.total) * 100); 
     // Increase the progress bar length. 
     if (percentLoaded < 100) { 
      progress.style.width = percentLoaded + '%'; 
      progress.textContent = percentLoaded + '%'; 
     } 
    } 
} 

function handleFileSelect(evt) { 
    // Reset progress indicator on new file selection. 
    progress.style.width = '0%'; 
    progress.textContent = '0%'; 

    reader = new FileReader(); 
    reader.onerror = errorHandler; 
    reader.onprogress = updateProgress; 
    reader.onabort = function (e) { 
     alert('File read cancelled'); 
    }; 
    reader.onloadstart = function (e) { 
     document.getElementById('progress_bar').className = 'loading'; 
    }; 
    reader.onload = function (e) { 
     // Ensure that the progress bar displays 100% at the end. 
     progress.style.width = '100%'; 
     progress.textContent = '100%'; 
     setTimeout("document.getElementById('progress_bar').className='';", 2000); 
    } 

    // Read in the image file as a binary string. 
    reader.readAsDataURL(evt.target.files[0]); 
} 

document.getElementById('files').addEventListener('change', handleFileSelect, false);