Question

我正在寻找图像上传问题的解决方案。我有一个脚本，用javascript压缩我的文件。然后它创建一个结果为base64的数组，我希望将其作为<input type="hidden">添加到我的页面中。我只有一个问题。压缩这些图像需要一些时间，文件输入上的.change()事件是不够的。因为它在压缩完成之前就开始了。

我正在考虑为语句添加类似事件侦听器的内容，例如

if(result_base64.length != input.files.length){
    listen
} else {
    do the function
}

是否可以在不设置间隔功能的情况下实现？提前感谢您提供的任何帮助。

压缩脚本：

var result_base64 = [];
var images = document.getElementById('images');
var max_width = images.getAttribute('data-maxwidth');
var max_height = images.getAttribute('data-maxheight');

images.onchange = function(){
    if ( !( window.File && window.FileReader && window.FileList && window.Blob ) ) {
        alert('The File APIs are not fully supported in this browser.');
        return false;
    }
    readfiles(images.files);
}

function readfiles(files) {
    for (var i = 0; i < files.length; i++) {
        processfile(files[i]);
    }
    images.value = "";
}

function processfile(file) {
    if( !( /image/i ).test( file.type ) ){
        alert( "File "+ file.name +" is not an image." );
        return false;
    }
    var reader = new FileReader();
    reader.readAsArrayBuffer(file);
    reader.onload = function (event) {
        var blob = new Blob([event.target.result]);
        window.URL = window.URL || window.webkitURL;
        var blobURL = window.URL.createObjectURL(blob);
        var image = new Image();
        image.src = blobURL;
        image.onload = function() {
            result_base64.push(resizeMe(image));
        }
    };
}

function resizeMe(img) {
    var canvas = document.createElement('canvas');
    var width = img.width;
    var height = img.height;

    if (width > height) {
        if (width > max_width) {
            height = Math.round(height *= max_width / width);
            width = max_width;
        }
    } else {
        if (height > max_height) {
            width = Math.round(width *= max_height / height);
            height = max_height;
        }
    }
    canvas.width = width;
    canvas.height = height;
    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0, width, height);
    return canvas.toDataURL("image/jpeg",0.7);
}

Answer 1

然后它创建一个结果为base64
的数组

在processFile（）中，你可以触发像

这样的事件

function processfile(file) {
    if( !( /image/i ).test( file.type ) ){
        alert( "File "+ file.name +" is not an image." );
        return false;
    }
    var reader = new FileReader();
    reader.readAsArrayBuffer(file);
    reader.onload = function (event) {
        var blob = new Blob([event.target.result]);
        window.URL = window.URL || window.webkitURL;
        var blobURL = window.URL.createObjectURL(blob);
        var image = new Image();
        image.src = blobURL;
        image.onload = function() {
            result_base64.push(resizeMe(image));
            $(window).trigger('filesCompressed', result_base64); // This is the addition
        }
    };

}

如果您需要这些文件，可以像

一样收听此事件

$(window).on('filesCompressed', function(e, files) {
   // Do something with files
 })

Catch：侦听代码必须在触发事件之前执行。

jQuery - 听取声明，直到它成为现实

1 个答案: