Question

我正在创建一个拖放上传器，我使用base64使用隐藏字段将数据发送到我的服务器。（该文件将在稍后发送，而不是在删除后立即发送。）

测试小图像文件和文本文件的效果非常好，但是当我尝试20MB拉链或2MB WAV时，整体变得不稳定。谷歌浏览器崩溃或显示空白输出框，firefox挂起很长时间，最终显示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提供的相同演示，并且对于23Mb文件都花了大约2秒钟。然后我尝试在jsfiddle创建那个确切的代码，但由于某种原因，拖放不想运行。所以我使用了文件选择器方法。同样，在文件中读取只需要大约2秒钟。我能想到的是，你可能会遇到一些机器内存问题，比如缺少什么，或者硬盘传输速度？或者在浏览器中拖拽代码时可能存在一些问题。：/

无论如何，您可以在我的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);

使用拖放上传文件是不稳定的

1 个答案: