0

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

测试小图像文件和文本文件效果很好，但是当我尝试 20MB zip 或 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

4

1 回答 1

0

好的，我尝试了您的实时链接和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);
于 2013-04-25T23:09:10.567 回答