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>

在我单击此 "Change Photo" 和 select 后，无扩展名的照片显示“$scope.imageFile”为空。我如何在 AngularJS v1.2.16 中解决它？

Answer 1

您可以通过将 ngf-pattern 设置为通配符（星号 *）

来上传无扩展名文件

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

您提供的模式未能通过正则表达式文本，因为它需要一个点 (.)。

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

编辑给定等效文件 "anon.jpg" 和 "anon" 选择 "anon.jpg" 会产生 scope.file as

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

与无扩展名 "anon" 文件比较：

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>

我updated the plunkr为了证明这一点，看看代码。

在调试器中四处寻找可以节省时间。

如果您不满意，您需要提出问题 at the github project。

Answer 2

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

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

ng-model gives null for extension less files in angular js

angularjs

ng-file-upload