显示文件名并允许用户在提交表单之前删除文件[重复]答案

【问题标题】：show the file names and allow user to remove the files before submitting the form [duplicate]显示文件名并允许用户在提交表单之前删除文件[重复]
【发布时间】：2018-06-22 20:54:33
【问题描述】：

我正在一个网页上工作，用户需要上传文件并将它们与一些消息一起发送.. 我注意到的第一件事是，当我们要上传文件或发送附件（单个或多个）时，我们需要使用以下代码行：

<input type = "file" name="file" file-model="file" multiple/>

使用上面的代码，当用户选择多个文件时，它不会在网页上显示文件名，而是在选择 2 个文件时显示 2 个文件。我想显示文件名，如果用户想在提交表单之前删除文件（就像我们在电子邮件附件中所做的那样），他应该能够在发送之前删除文件。

示例插件：https://plnkr.co/edit/Le6edwhX3Bye6E2XwIhd?p=preview

关于如何使用 angularjs 的任何输入。

【问题讨论】：

您的 PLNKR 没有显示任何努力。 JS文件为空。
请参阅How to POST binary files with AngularJS (with upload DEMO)，了解如何在 AngularJS 中选择文件并显示其文件名。

标签： html angularjs angularjs-fileupload

【解决方案1】：

我建议使用 BlueImp Angular File Uploader：https://blueimp.github.io/ 它可以让您与拖放和 ajax 上传等其他很酷的东西一起执行此操作

这是一个演示： https://blueimp.github.io/jQuery-File-Upload/

另外，它看起来有 Angular JS 的味道： https://blueimp.github.io/jQuery-File-Upload/angularjs.html

【讨论】：