聆听声明，直到它为真

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

Then it creates an Array with results in 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：监听代码必须在事件触发前执行。

聆听声明，直到它为真

Listen for the statement until it's true

javascript

jquery

event-handling

listener

jquery-events