Question

我目前正在尝试实施一个新的HTML5驱动的上传网站。出于安全原因，我通常对要上传的文件类型非常严格，因此通常只有ZIP文件可以从后端接受。由于似乎有许多人似乎在使用ZIP方面遇到困难，我想我会试一试并做一些如下事情：

选择要上传的文件
读取每个文件的4个第一个字节，以确定它是否为ZIP文件（它不是万无一失的，但不要小心）。
直接上传ZIP文件
获取所有其他文件并动态创建ZIP存档并上传新创建的存档。

除了文件类型检查外，整个过程运作良好：

//'files' is an array of files retrieved from <input type='file'...for instance
    function checkFileType(files, callback) {
        for (var i = 0; i < files.length; i++) {

            var fileReader = new FileReader();

            fileReader.onloadend = function (e) {
                var arr = (new Uint8Array(e.target.result)).subarray(0, 4);
                var header = "";
                for (var j = 0; j < arr.length; j++) {
                    header += arr[j].toString(16);
                }

                if (header == '504b34')
                    ;
                else
                    callback("something");

            };


            var blob = files[i].slice(0, 4);
            fileReader.readAsArrayBuffer(blob);
        }
    }

我正在使用＆＃34; slice＆＃34;这里只读取4个第一个字节（如果文件很大，我不想弄乱内存）。唯一困扰我的是：由于切片，我失去了对数组中实际文件的引用。我需要从数组中删除被检测为ZIP的文件，并开始即时上传。

之后，阵列中所有剩余的文件都应压缩。我的方法似乎不起作用，因为缺少参考＆＃39; ...

Answer 1

我想我刚刚找到了一个简单的解决方案，使用了一个闭包......

function checkFileType(files, callback)
{
    for(var i = 0; i < files.length; i++) {
        var blob = files[i].slice(0, 4);
        var fileReader = new FileReader();

        fileReader.onload = (function(file_array, i)
        {
            return function(e) {
                var arr = (new Uint8Array(e.target.result)).subarray(0, 4);
                var header = "";

                for (var j = 0; j < arr.length; j++) {
                    header += arr[j].toString(16);
                }

                if (header == '504b34')
                    callback("ZIP");
                else
                    callback(e.name);
            };
        })(files, i);

        fileReader.readAsArrayBuffer(blob);
        console.log(fileReader.result);
    }
}

像这样，对数组和索引的引用都可以在＆＃39; onload＆＃39;回调。

Javascript Filereader - 文件类型检查

1 个答案: