在使用jquery文件上传和Compressor.js进行压缩后,努力将新的图像信息传递回表单数据

时间:2019-01-19 16:57:56

标签: jquery-file-upload blueimp

我正在构建一个图像上传文件,在使用jquery文件上传文件上传之前,使用Compressor.js压缩图像,但是我不知道如何在jquery文件上传提交数据之前将该blob信息传递回我的表单数据。我无法同时进行压缩工作和上载工作,只是我一辈子都无法弄清楚如何让他们一起工作。

$('#upload').fileupload({
    dropZone: $('#drop'),
    // This function is called when a file is added to the queue;
    add: function (e, data) {

        var Compressor = window.Compressor;
        var URL = window.URL || window.webkitURL;
        var output = document.getElementById('output');
        new Promise((resolve, reject) => {
            new Compressor(data.files[0], {
                quality: 0.1,
                maxHeight : 2880,
                maxWidth : 5760,
                mimeType: 'image/jpeg',
                success: resolve,
                error: reject,
            });
        }).then((result) => {
            console.log('Compress success');
            var newImage = new Image();
            newImage.src = URL.createObjectURL(result);
            newImage.alt = 'Compressed image';
            output.appendChild(newImage);

            // This is where I'm trying to update the original file 
            with the new compressed file before jquery uploader submit..

            data.formData = newImage.src;
            console.log(data);
            var jqXHR = data.submit();


        }).catch((err) => {
            console.log('Compress error');
            window.alert(err.message);
        }).finally(() => {
            console.log('Compress complete');
        });

    }
});

0 个答案:

没有答案