Html 显示从不同目录中选择的文件列表以及删除文件的能力

我正在尝试附加一些文件（零/单个/多个），并使用ANGULARJS和spring将它们作为附件发送到电子邮件

需要注意的一点是，当从多个目录中选择文件时，只显示最近选择的文件，而不显示以前选择的文件。如何显示用户从不同目录中选择的所有文件，并在提交表单之前允许删除该文件（所有文件或一个文件）

演示：

html:

---

默认浏览器行为是显示当前选定的文件，以确保您必须自定义该文件。而且，我看到了您的自定义指令代码，它不允许从不同的目录中选择多个文件。 所以，您可以做的是，创建另一个scope变量&每当用户选择文件时，您都会将这些文件推送到这个数组中。这样，您就拥有了一组来自相同/不同目录的所有选定文件，然后您就可以对最终将要更新的每个文件拥有删除功能。 更新的html视图部分：

Attachment:  <input type="file" ng-file-model="files" multiple /><br>
<p ng-repeat="file in filesToUpload track by $index">
    {{file.name}} <span class="delete-file" ng-click="deleteFile($index)">X</span>
</p>

在控制器中，删除文件功能为：

$scope.deleteFile = function(index){
  $scope.filesToUpload.splice(index, 1);
};

现在用户可以随时删除文件。但输入字段仍将显示最后选定的文件，并且在删除特定文件后，它也不会更改其状态，因此您可以通过不透明度隐藏字段：0；css&然后创建自定义上传按钮&从该触发器单击实际隐藏的文件输入元素

更新：使用自定义上载按钮检查相同代码的更新：

---

请查找带有您的一些代码的演示。当我选择了多个文件并单击“发送”按钮时，我面临的问题是，文件对象打印为[object object]，而不是[object file]。当用户选择文件时，我将在getFiles（..）方法中打印对象，该方法完美地显示了[object file]。如何在$scope.upload（..）中将要打印的对象打印为[object File]，当用户单击发送按钮时会调用该文件。。[object File]允许在服务器上读取文件信息，不像[object object]。@user8373379代码工作正常。你为什么到处都在报警？它们都是对象&这就是它将在警报中显示的内容！如果您真的想查看这些对象的内部内容，只需执行console.log或在chrome开发工具中调试代码即可。检查这个：我已经记录了值..（单击发送检查控制台）@user8373379还检查自定义上载按钮中的相同内容示例：在发送时检查控制台中要加载的文件。这是对你的情况最好的解决方案

Attachment:  <input type="file" ng-file-model="files" multiple /><br>
<p ng-repeat="file in filesToUpload track by $index">
    {{file.name}} <span class="delete-file" ng-click="deleteFile($index)">X</span>
</p>

scope.$apply(function () {
    if (isMultiple) {
        modelSetter(scope, values);
    } else {
        modelSetter(scope, values[0]);
    }
    if(values){
      scope.filesToUpload = scope.filesToUpload.concat(values);
    }
});

$scope.deleteFile = function(index){
  $scope.filesToUpload.splice(index, 1);
};