在上传文件之前验证表单字段（Blueimp jquery 文件上传）

Question

我一直在工作 blueimp 文件上传（angularjs 版本），我想在上传文件之前验证表单说我有一个包含名称和描述的表单，我希望在上传文件之前必须提供这些。

我想使用角度表单验证，到目前为止我已经尝试过这段代码

$scope.$on('fileuploadsubmit', function (event, files) {
    if (filename) { // its a formfield 
        _uploadTemp.loadingIcon = true;
        $.each(files.files, function (index, file) {
            files.formData = {
                file_rename: file.name,
                templateName: _uploadTemp.name
            };
        });
    }
    else {
        form.submit = true
    }
});

执行此操作会显示文件名错误，但也会将文件提交到服务器。有什么方法可以让我停止文件上传并显示错误？？

任何帮助将不胜感激，只是想提一下我正在使用 BLUEIMP 文件上传 Angularjs 版本

Answer 1

我已经为此目的创建了一个指令PLUNKER LINK。我粘贴在那里的代码只是为了让您了解指令应该如何。很抱歉没有提供工作版本。如果我今天/明天有时间，我会让它工作。删除所有依赖项需要 1-2 小时。但这应该会给你和想法，让你继续前进。

我在那里实现的是：

1. 需要验证
2. 扩展验证
3. 非空文件
4. 使表单变脏/无效
5. 漂亮的选择/删除按钮
6. 获取对象中的文件大小
7. 使用 ui validate 进行自定义验证

在 javascript 中指定验证

$scope.fileValidations = {
                extension: "xlsx",
                required: true,
            };


<cs-file-upload ng-model="selected.filename" file-info="selected.fileInfo"
                        validations="fileValidations"></cs-file-upload>

我为此使用了 angular-file-upload 模块，它应该或多或少类似于 blueimp。

我一定会尝试在明天之前发布工作版本...