Javascript HTML文件输入的jQuery事件；“确定”按钮；点击

我对生成所选图像文件的实时预览的脚本有问题。问题是，当我使用文件输入选择文件时，内存中会出现峰值，因此我的on（'change'）方法启动得太晚，无法得到有用的用户响应。现在，如果我按Ctrl+F5，有时浏览器的响应速度会大大提高，并快速生成预览。延迟不在图像数据的内联中，而是用户在文件对话框上选择“打开”与onChange事件触发之间的时间。我不知道如何追踪这两件事之间发生了什么

我通过CSS定位隐藏了HTML文件输入标记，并在单击单独的span元素时触发了click事件。输入标记注册了on（'change'）函数。更改时，我通知用户正在生成图像预览。生成完成后，我会通知“预览完成”。如前所述，由于onchange事件由于内存峰值而延迟，我从未看到中间文本“请稍候…”。这在Firefox和Chrome中都会发生

javascript

var imageSelectClass = '';
var imageSelectDefaultBGSize = 'auto';
var imageSelectWorkingBGSize = '100%';
var imageSelectDefaultUrl = '';
var imageSelectNoPreviewUrl = '';

function resetImageSelection(resetImage, toOriginalImage) {
    $('.image-select-text').text("");
    $('.image-select-text').css("opacity", 1);
    $('.' + imageSelectClass).css('backgroundSize', imageSelectDefaultBGSize);
    if (resetImage) {
        if (toOriginalImage) $('.' + imageSelectClass).css('backgroundSize', imageSelectWorkingBGSize);
        if (imageSelectDefaultUrl != imageSelectNoPreviewUrl) {
            $('.' + imageSelectClass).css('backgroundImage', "url('" + (toOriginalImage ? imageSelectDefaultUrl : imageSelectNoPreviewUrl) + "')");
        }
    }
}

function handleImageSelection(evt) {

    // Clear the photo box
    resetImageSelection(true, true);

    var files = evt.target.files; // FileList object

    // Loop through the FileList and render image files as thumbnails.
    for (var i = 0, f; f = files[i]; i++) {

        // Only process image files.
        if (!f.type.match('image.*')) {
            evt.preventDefault();
            resetImageSelection(true, true);
            $('#' + imageSelectClass).replaceWith($('#' + imageSelectClass).clone());
            makeIntoImageSelection(imageSelectClass, imageSelectDefaultUrl, imageSelectNoPreviewUrl, imageSelectDefaultBGSize, imageSelectWorkingBGSize);
            newTextMessage("Not an image file!", 2000, 400);
            continue;
        }

        var isValidPreview = f.type.match('image\/(jp(e?)g|png|gif|bmp)');
        //var reader = new FileReader();
        var theType = /\/(.*)/.exec(f.type)[1].toUpperCase();

        // Limit preview to 20MB file sizes
        var limit = 20971520;
        if (f.size < limit) {
            if (isValidPreview) {
                resetImageSelection(false, false);
                var URL = window.URL || window.webkitURL;
                if (URL.createObjectURL) {
                    newTextMessage("Preview generated.", 3000, 400);
                    $('.' + imageSelectClass).css('backgroundSize', imageSelectWorkingBGSize);
                    $('.' + imageSelectClass).css('backgroundImage', "url('" + URL.createObjectURL(f) + "')");
                } else {
                    resetImageSelection(true, false);
                    newTextMessage("Sorry, but your browser doesn't support image previews.", 0, 0);
                }
            } else {
                resetImageSelection(true, false);
                newTextMessage(theType + " images can't be previewed 'on-the-fly'. However it will be converted when you save.", 0, 0);
            }
        } else {
            resetImageSelection(true, false);
            newTextMessage("On-the-fly previews only available for files <= " + (limit/1024/1024) + "MB", 0, 0);
        }

    }
}

function makeIntoImageSelection(id, defaultUrl, noPreviewUrl, defaultBGSize, workingBGSize) {
    imageSelectClass = id;
    originalCanvasWidth = $('.' + id).width();
    originalCanvasHeight = $('.' + id).height();
    imageSelectDefaultBGSize = defaultBGSize;
    imageSelectWorkingBGSize = workingBGSize;
    imageSelectDefaultUrl = defaultUrl;
    imageSelectNoPreviewUrl = noPreviewUrl;

    // When span is clicked, trigger the file input
    $('span.' + id).on('click', function(evt) {
        evt.preventDefault();
        $('#' + id).click();
        newTextMessage("Select an image.", 3000, 400);
    });
    $('#' + id).on('change', function (evt) {
        newTextMessage("Generating preview...", 2000, 400);
        handleImageSelection(evt);
    });
    $('.image-select-text').css('maxWidth', $('.image-select.' + id + ' span').css('width'));
}

function newTextMessage(msg, display_time, fadeDelay) {
    $('.image-select-text').text(msg);
    $('.image-select-text').css("opacity", 1);
    if (display_time > 0) {
        $('.image-select-text').delay(display_time).fadeTo(fadeDelay, 0, function() {
            $('.image-select-text').text("");
            $('.image-select-text').css("opacity", 1);
        });
    }
}

makeIntoImageSelection('photograph_photo', '[url of original image file if any]', '[url of global default image file]', '100%', '100%');

---

我真的说不出是什么导致了这种延迟，但我要把它归结为“奇怪的情况。计算机重启基本上解决了这个问题。”

makeIntoImageSelection('photograph_photo', '[url of original image file if any]', '[url of global default image file]', '100%', '100%');