Question

我已经搜索了几个小时来解决我的问题。但我现在要问社区。我编写了一个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();

感谢您的帮助。

Answer 1

在用户完成裁剪步骤之前，请勿保存头像。

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

我可以提出类似的情况：

当您将链接粘贴到Facebook帖子中时，Facebook会为您提供该链接的缩略图。如果你取消这个帖子怎么办？缩略图在哪里，或者实际上，由于没有帖子，它在哪里？在你提交之前，它都在临时结构中，即。完成这个职位。

页面刷新可以绕过功能

1 个答案: