javascript - jQuery 如何检测文件当前是否正在上传(事件正在运行)

Question

我写了这段代码:

var fi = self.find('.file');

fi.on('change', function() {

    if(fi.prop('files').length === 1) {
        var file = fi.prop('files')[0],
            name = file.name,
            ext = name.split('.').pop().toLowerCase(),
            size = (file.size / 1048576).toFixed(2),
            type = file.type;

        if($.inArray(ext, ['jpg', 'png', 'gif']) == -1) {
            return false;
        }

        if($.inArray(type, ['image/jpeg', 'image/png', 'image/gif']) == -1) {
            return false;
        }

        if(size > 1.2) {
            return false;
        }

        ajax(createData(file));
        return false;
    }

    return false;
});

我一次只允许上传 1 个文件(从 html 端、js 端和 php 端 View )，但是使用此脚本，如果用户选择更大尺寸的文件，比如说 2+ MB，他的点击速度非常快他可以选择另一个文件，这会创建第二个事件，并且两个文件都被上传到服务器，这会导致困惑和问题。另外，我将实现拖放上传选项，因此作为初学者 javascript 编码器，我向社区询问是否有办法:

1. 防止在文件已上传时触发脚本(我的意思不是隐藏输入或禁用它或暂时关闭事件监听器等方法，我的意思是检测事件是否正在运行并防止执行脚本的方法) 。我尝试了默认阻止或停止传播之类的方法，但这些方法显然不起作用。

2. 添加一个按钮，该按钮将取消正在进行的脚本(意味着停止文件上传并“清理”它，以便用户可以安全地重试)

提前感谢您的所有提示和指导;)

Answer 1

我最近在我的一个业余项目中致力于此。这是一个代码示例:

            var fileReader = new FileReader();
            var fileFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i;

            var imageObject = { valid: false };


                fileReader.onload = function (fileReaderEvent) {
                    imageObject.data = fileReaderEvent.target.result;
                };

                var loadImage = function() {
                    if (element[0].files.length === 0) {
                        return;
                    }

                    var file = element[0].files[0];

                    imageObject.filename = file.name;

                    if (!fileFilter.test(file.type)) {
                        imageObject.error = 'You must select a valid image!';
                        imageObject.valid = false;
                        return;
                    }else{
                        imageObject.error = '';
                        imageObject.valid = true;
                    }

                    fileReader.readAsDataURL(file);
                };

                element.on('change', loadImage);
        }

这是来自 AngularJS 项目，因此我删除了所有 Angular 组件，但添加必要的 JQuery 代码应该很容易。