0

我已经搜索了几个小时来解决我的问题。但我现在必须问社区。我已经编写了一个 ajax 文件上传系统。这是Javascript：

var handleUpload = function(event) {
    event.preventDefault();
    event.stopPropagation();

    var fileInput = document.getElementById('fileAvatar');
    var data = new FormData();
    data.append('ajax', true);
    data.append('avatar', fileInput.files[0]);
    var request = new XMLHttpRequest();

    request.upload.addEventListener('error', function(event) {
        alert('Upload Failed');
    });

    request.addEventListener('readystatechange',function(event) {
        if (this.readyState == 4) {
            if (this.status == 200) {
                var uploaded = this.response.split("|");

                // DO SOME ERROR HANDLING IN THIS AREA              

                if (uploaded[0] == 'upload_success') {

                    $('.avatarCropImage').attr('src','<?php echo USERFILES;?><?php echo $log_username; ?>/' + uploaded[1]);
                    $('.cropInput').attr('type',uploaded[2]);
                    showPopup('cropAvatar');

                    /************************/
                    /***** Problem Area *****/
                    /************************/

                } else {
                    showPopup('errorNotification');
                    _('popupError').innerHTML = 'Something went wrong. Please try again.';
                }
            } else {
                alert('Error' + this.status);
            }
        }
    });
    request.open('POST','<?php echo $url_data; ?>');
    request.setRequestHeader('Cashe-Control', 'no-cashe');
    request.send(data);
}

window.addEventListener('load', function() {
    var submit = document.getElementById('submitAvatar');
    submit.addEventListener('click',handleUpload);
});

文件上传工作正常，如您所见，上传文件后，我将上传的图像推送到名为cropAvatar.

然后用户必须裁剪一个区域以获得他的头像的缩略图。如果他选择一个区域并点击裁剪按钮，裁剪功能将运行：

function cropImage() {
    var top = $('.cropBox').position().top - 3;
    var left = $('.cropBox').position().left - 3;
    var width = $('.cropBox').width();
    var height = $('.cropBox').height();
    var src = $('.avatarCropImage').attr('src');
    var type = $('.cropInput').attr('type');

    var ajax = ajaxObj("POST", "<?php echo $url_data; ?>");
    ajax.onreadystatechange = function() {
        if(ajaxReturn(ajax) == true) {
            if (ajax.responseText == "") {
                $('.buttonClose').click();
                $('.avatarImage').attr('src',src);
                $('.cropAvatar').css('display','none');
            } else {
        alert(ajax.responseText);
        showPopup('errorNotification');
        _('popupError').innerHTML = 'Something went wrong. Please try again.';
        }
    }
    }
    ajax.send("action=avatar&top="+top+"&left="+left+"&width="+width+"&height="+height+"&src="+src+"&type="+type);
}

这也很有效。现在的问题是用户在重新加载页面时可以绕过 Crop-Function。你有什么解决办法吗？

我还尝试通过在以下代码中输入以下代码来解决此问题Problem Area：

// cropImage() is the Crop-Function
window.unload = cropImage();

感谢您的帮助。

4

1 回答 1

1

在用户完成裁剪步骤之前不要保存头像。

将文件保留为悬空临时文件，直到用户完成整个上传向导。

我可以想出一个类似的场景：

当您将链接粘贴到 Facebook 帖子中时，Facebook 将为您提供链接的缩略图。如果你然后取消帖子怎么办？缩略图在哪里，或者实际上，自从没有帖子以来它在哪里？在您提交之前，这一切都在一个临时结构中，即。完成帖子。

于 2013-10-04T15:53:41.823 回答