php - 调整图像客户端大小和通过 AJAX 上传仅有时有效

Question

我在允许用户通过表单提交图像文件、在客户端调整其大小、通过 AJAX 和 PHP 将其上传到 Wordpress 网站，然后显示图像的缩略图版本的代码方面存在问题。问题是代码有时只能工作，而且它似乎更喜欢某些文件而不是其他文件。我有一张 jpeg 图片每 10 次尝试只上传一次，而其他 jpeg 图片每 10 次尝试上传 5 次。此外，当图片正在上传并达到 100% 时，有时进度条会回落到大约 85%，然后再次上升到 100%。我认为这是我的问题的原因，但我一直无法弄清楚如何解决它。

jQuery:

$('#myform-fileinput').change(function() { 
    if ($('#myform-fileinput').length) {

        if (window.File && window.FileReader && window.FileList && window.Blob) {

            var filesToUpload = document.getElementById('myform').files;
            var file = filesToUpload[0];

            var img = document.createElement("img");
            var reader = new FileReader();
            reader.onload = function(e)
            {
                img.src = e.target.result;

                var canvas = document.createElement("canvas");
                var ctx = canvas.getContext("2d");
                ctx.drawImage(img, 0, 0);
                // Do other manipulations and send via AJAX here
            reader.readAsDataURL(file);
        }
    }
});

Answer 1

我能够解决这个问题，事实证明这很简单。在代码中，而不是做

reader.onload = function(e)
        {
            img.src = e.target.result;

            var canvas = document.createElement("canvas");
            var ctx = canvas.getContext("2d");
            ctx.drawImage(img, 0, 0);
            // Do other manipulations and send via AJAX here
        }
reader.readAsDataURL(file);

我需要做

reader.onload = function(e)
        {
            image.onload = function () {
               var canvas = document.createElement("canvas");
               var ctx = canvas.getContext("2d");
               ctx.drawImage(img, 0, 0);
               // Do other manipulations and send via AJAX here
            }

            image.src = e.target.result;
        }
reader.readAsDataURL(file);

我只需要在处理图像数据之前给它加载时间。