Question

我是javascript / web编程的新手。我上传表单的主要用途主要是csv文件。我已经在使用pako来gzip我的json（在请求URL中）。

如何在将文件发送到服务器之前对其进行gzip压缩？

这大致是我构建formdata的方式

$.each($("input[type=file]"), function(i, obj) {
    $.each(obj.files, function(j, file) {
        formData.append(obj.name, file); // we need to gzip the data
    })
});

Edit1：我设法（我认为）使用pako gzip文件，但有1个问题 - 异步问题。这是我的新代码：

$.each($("input[type=file]"), function(i, obj) {
    $.each(obj.files, function(j, file) {
        formData.append(obj.name, file); // we need to gzip the data
        var r = new FileReader();
        r.onload = function(){
            var zippedResult = pako.gzip(r.result);
            var oMyBlob = new Blob(zippedResult, {type : file.type}); // the blob
            formData.append(obj.name, oMyBlob); // we need to gzip the data
        };
        r.readAsArrayBuffer(file);
    })
});
// Time to send the formData!
 $.ajax({......

正如您所看到的那样，问题发生在onload函数仅在ajax执行后运行，因此formData为空白

edit2：我正在尝试为输入文件创建一个onchange事件，所以这是我到目前为止所提出的。但是有一个问题 - 它似乎没有正确压缩。数据类型问题？

$("input[type=file]").change(function (event){  
    var fileList = this.files;
    $.each(fileList,function(i,file){
        var r = new FileReader();
        r.onload = function(){                   
            var zippedResult = pako.gzip(r.result);
            var oMyBlob = new Blob(zippedResult, {type : file.type});
            app.formData.append(event.target.name, oMyBlob, file.name);
        };
        r.readAsArrayBuffer(file);
    });
});

Answer 1

您可以使用库JSZip。

Answer 2

这就是我所做的 - 请注意formData是一个全局变量。请注意在您提交时清除formData，否则它将继续增加。此外，如果您重新选择一个文件，它将被附加到表单上（可能不是您想要的） - 我还没有找到解决方法。

$("input[type=file]").change(function (event){  
    var fileList = this.files;
    $.each(fileList,function(i,file){
        var r = new FileReader();
        r.onload = function(){
            var convertedData = new Uint8Array(r.result);

            // Zipping Uint8Array to Uint8Array
            var zippedResult = pako.gzip(convertedData, {to : "Uint8Array"});

            // Need to convert back Uint8Array to ArrayBuffer for blob
            var convertedZipped = zippedResult.buffer;

            var arrayBlob = new Array(1);
            arrayBlob[0] = convertedZipped;

            // Creating a blob file with array of ArrayBuffer
            var oMyBlob = new Blob(arrayBlob , {type : file.type} ); // the blob (we need to set file.type if not it defaults to application/octet-stream since it's a gzip, up to you)
            app.formData.append(event.target.name, oMyBlob, file.name); // we need to gzip the data
        };
        r.readAsArrayBuffer(file);
    });
});

Answer 3

我已将gzip添加到JSZip。

I need JSZip and gzip for my web page, and JSZip has all the ingredients, but hides them in ways I can't crack

JSZip的设计要好得多，它能够以分块/流模式处理大文件。我不认为pako可以做到这一点。我在项目中同时使用了ZIP文件和gzip，因此我认为将它们基于相同的软件包会很有用。

gzip表单输入文件

3 个答案: