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端视图），但是如果用户选择更大尺寸的文件，请使用此脚本，让我们说2+ MB，他真的是快速点击器他可以选择另一个文件并创建第二个事件，并且这两个文件都被上传到服务器，这会导致混乱和问题。此外，我将实施拖放上传选项，以便作为初学者javascript编码器我问社区是否有办法：

防止在文件上传时触发脚本（我不是说隐藏输入或者对它进行diable或者暂停事件监听器的方法，我的意思是检测事件是否正在运行并阻止执行脚本的方法）。我尝试过默认阻止或停止传播等功能但这些功能显然不起作用。
添加一个按钮，该按钮将取消正在运行的脚本（意味着停止文件上传和＃34;清理它＆＃34;以便用户可以安全地再试一次）

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

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项目，所以我已经删除了所有角度组件，但是添加必要的JQuery代码应该很容易。

jQuery如何检测文件当前是否正在上传（事件正在运行）

1 个答案: