0

ドラッグ アンド ドロップ アップローダを作成しており、非表示フィールドを使用して base64 を使用してデータをサーバーに送信しています。(ファイルはドロップされた直後ではなく、後で送信されます)。

小さな画像ファイルとテキスト ファイルのテストは非常にうまく機能しますが、20MB の zip または 2MB の WAV を試すと、全体が不安定になります。Google Chrome がクラッシュするか、空白の出力ボックスが表示され、Firefox が長時間ハングし、最終的に base64 文字列が表示されます。IE は実際には 1 回だけ機能し、文字列を最速で表示しますが、それでも許容できないほどの待機時間があります。

私のコードは非効率的ですか、それとも何か他のものですか?

これが私のコードです：

<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/propeller/drop.htmlにあります。

4

1 に答える 1

0

わかりました、あなたのライブ リンクとhtml5rocksで入手できる同じデモを試しましたが、どちらも 23Mb ファイルで約 2 秒かかりました。次に、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);
于 2013-04-25T23:09:10.567 に答える