ng-model 为 Angular JS 中的扩展名较少的文件提供 null

Question

我想使用以下代码片段上传扩展名较少的文件。

<button id="profileImage" ngf-select ng-model="imageFile" ngf-pattern="'image/*'" ngf-accept="'image/*'" ngf-change="clearImageErrorMsgs()">Change Photo</button>

在我单击此"更改照片"并选择扩展名后，我得到"$scope.imageFile"为空。如何在 AngularJS v1.2.16 中解决它？

Answer 1

您可以通过将ngf 模式设置为通配符(星号 *)来上传无扩展名的文件

<button id="profileImage" ngf-select ng-model="imageFile" 
ngf-pattern="'*'" ngf-accept="'image/*'" 
ngf-change="clearImageErrorMsgs()">Change Photo</button>

您给出的模式使正则表达式文本失败，因为它需要一个点 (.)。

这是一个演示用例的 plnkr，但是当然提交失败并显示 400，因为我没有地方上传文件;)

编辑给定的等效文件"匿名.jpg"和"匿名"选择"匿名.jpg"将scope.file生成

为

$ngfName: "anon.jpg"
size:9612
type:"image/jpeg"
__proto__: Blob

与无扩展名的"匿名"文件进行比较：

lastModified:1453925356897
lastModifiedDate:Wed Jan 27 2016 15:09:16 GMT-0500 (Eastern Standard Time)
name:"anon"
size:31002
type:""
webkitRelativePath:""
__proto__: File

请注意__proto__属性的差异。 显然，ng-file-upload对无扩展名(即无类型)文件的处理方式不同。

在HTML中显示所选文件名所需要做的就是这样，其中scope.file是ng-model：

<span>{{file.$ngfName || file.name}}</span>

我更新了 plunkr 来演示这一点，看看代码。

在调试器中四处闲逛可以节省时间。

如果你不满意，你需要在github项目上提交一个问题。

Answer 2

您是否尝试过省略 ngf-accept 属性？