Question

我遇到了代码问题，允许用户通过表单提交图像文件，调整客户端大小，通过AJAX和PHP将其上传到Wordpress网站，然后显示图像的缩略图版本。问题是代码有时只能工作，似乎更喜欢某些文件而不是其他文件。我有一个jpeg图像，每10次尝试只上传一次，其他jpeg图像上传5次中有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);

我只需要在操作之前给图像数据加载时间。

调整图像客户端的大小并通过AJAX上传仅在某些情况下有效

1 个答案: