Ng-file-upload显示上传指示符
Ng-file-upload是一个用于AngularJS的开源文件上传指令。它提供了一个简单而强大的方式来处理文件上传，并且可以显示上传的进度指示符。
Ng-file-upload的主要特点包括：
- 简单易用：Ng-file-upload提供了一个简单的API，使得文件上传变得非常容易实现。
- 进度指示符：Ng-file-upload可以显示上传的进度指示符，让用户清楚地知道文件上传的进度。
- 多文件上传：Ng-file-upload支持同时上传多个文件，可以方便地处理批量上传的需求。
- 文件验证：Ng-file-upload可以对上传的文件进行验证，例如文件类型、大小等，确保上传的文件符合要求。
- 与后端集成：Ng-file-upload可以与后端服务器进行集成，支持各种常见的文件上传方式，例如基于表单的文件上传、基于Ajax的文件上传等。
Ng-file-upload的应用场景包括但不限于：
- 图片上传：Ng-file-upload可以用于实现用户头像、相册、图片分享等功能中的图片上传。
- 文件上传：Ng-file-upload可以用于实现文件分享、附件上传等功能中的文件上传。
- 多媒体上传：Ng-file-upload可以用于实现音频、视频等多媒体文件的上传。
- 表单上传：Ng-file-upload可以用于实现包含文件上传的表单提交。
推荐的腾讯云相关产品和产品介绍链接地址：
- 对象存储（COS）：腾讯云对象存储（COS）是一种高可用、高可靠、强安全的云端存储服务，适用于存储和处理任意类型的文件。详情请参考：https://cloud.tencent.com/product/cos
- 云服务器（CVM）：腾讯云云服务器（CVM）是一种弹性计算服务，提供可扩展的计算能力，适用于各种应用场景。详情请参考：https://cloud.tencent.com/product/cvm
请注意，以上推荐的腾讯云产品仅供参考，具体选择应根据实际需求进行评估和决策。
相关·内容
我正在使用ng-file-upload，并希望在上传过程中显示上传指示器，我还没有在文档中找到这样做的方法，但可能有一种方法？
浏览 3提问于2016-07-28得票数 0
回答已采纳
我使用ng-file-upload来上传图像。我想要显示图像的缩略图。我使用的是angular 1.6。有人可以粘贴选定图像的缩略图的工作代码吗？
浏览 49提问于2017-07-01得票数 0
回答已采纳
我正在开发一个Angular应用程序，需要允许用户使用ng-file-upload和html5将文件批量上传到Azure blob存储容器。我在这里查看了文档：，但当我需要在查询字符串上附加"comp=block&block=id“参数时，我不知道如何将分块应用于sas。
ng-file-upload是如何处理这种情况的？我需要修改现有的ng-file-upload来适应这个场景吗？目前是否有任何通过Upload.Upload公开的回调可以让我单独处理每个块？
浏览 5提问于2015-12-26得票数 0
1回答
我正在使用ng-file-upload上传图片，但在上传过程中找不到添加上传动画而不是图片的方法。有办法做到这一点吗？
浏览 0提问于2016-07-28得票数 0
有人能给我举一个使用ng-file-upload进行多部分上传的例子吗？此外，是否可以暂停/恢复上传(例如，当互联网中断或用户将机器置于睡眠状态时)。 谢谢。
浏览 16提问于2019-02-12得票数 1
回答已采纳
1回答
我正在使用下面的插件上传图片https://www.npmjs.com/package/ng-file-upload 但是当我选择一个图像时，它为什么会显示模糊的图像？ 下面是我的代码http://jsfiddle.net/ujnmzf8e/1/ .thumb {
width: 100px;
height: 100px;
float: none;
position: relative;
top: 7px;
} ?
浏览 36提问于2019-06-07得票数 0
我试图上传一个大于40 to的文件，但是它失败了，我得到了以下错误：
<Error> <Code>EntityTooLarge</Code> <Message>Your proposed upload exceeds the maximum allowed size</Message> <ProposedSize>41945391</ProposedSize> <MaxSizeAllowed>41943040</MaxSizeAllowed> <RequestId>yyy&l
浏览 3提问于2016-12-19得票数 0
回答已采纳
我尝试实现一个PHP脚本，它支持使用ng-file-upload进行块上传。有谁有主意吗？
浏览 0提问于2018-01-26得票数 0
1回答
我一直通过$http服务从我的表单中发布简单的数据(没有文件)。这些post请求包含JSON，并由我的express服务器处理。
现在我想将图片上传添加到我的表单中。
这需要"multipart/form-data“，所以我在我的前端安装了ng-file-upload，在我的节点服务器上安装了formidable。发布文件需要一个名为"Upload“的ng-file-upload特定服务(不是$http)
现在我必须做出以下决定：
当提交我的表单(现在包含初始字段数据+上传的文件)时，我是否应该通过"Upload“服务将所有内容打包到一个POST请求中？
或者我应该将文
浏览 9提问于2016-09-22得票数 0
我已经为我的Angular应用程序安装了AWS Cognito，并且我正在尝试将文件挂接到ng- s3.putObject -upload Upload服务中。
我想使用ng-file-upload的Upload.upload()方法，但我不知道如何将现有的身份验证连接与Cognito一起使用。其思想是使用ng-file- upload的拖放，然后upload将使用现有的Cognito连接上传到s3。我该怎么做呢？我之所以要使用ng-file-upload的Upload.upload()方法，是为了帮助保留一些功能，比如进度条(如果这是不正确的，请纠正我)。
浏览 0提问于2015-11-24得票数 2
在我的项目中有一个场景，我需要上传一个图像网址到s3。(就像s3的"“)。正确的做法是什么？我是否需要将url转换为blob，然后将此blob转换为文件？然后使用ng-file-upload (我已经在使用这个插件将图片上传到s3)。上传到s3，或者有没有其他方法来处理这个上传过程？
提前感谢！！
浏览 15提问于2016-07-19得票数 0
1回答
我试图上传多个图像，并将图像一个接一个地传递给API，因此一旦图像被上传，它就可以显示，而无需等待其他图像完成上传。
我的问题是我有一个加载程序，当图像上传时，我会显示它。如果有些图片已经上传完毕，而另一些则还在上传，那么加载程序已经消失了吗？
组件
{
isImagesUploading && (
<Box sx={{ width: "100%" }}>
<LinearProgress />
</Box>
);
}
const onUploadImage = (files) =>
浏览 2提问于2022-03-16得票数 1
回答已采纳
是否有可能从客户端应用程序(使用ng-file-upload的角度)获取图像，并将其传递到webApi控制器，然后上传到Cloudinary？读取文档时，Cloudinary似乎希望直接从文件/Amazon/ S3桶/internet位置读取图像。
如何将图像的字符串表示传递给cloudinary上载？
浏览 3提问于2016-12-02得票数 0
回答已采纳
1回答
我正在尝试从@types/ng-file-upload/index.d.ts导入模块，该模块包含
declare var angularFileUploadDefaultExport: string;
export = angularFileUploadDefaultExport;
declare module 'angular' {
export namespace angularFileUpload {
interface ImageDimensions {
}
}
}
现在如果我像下面这样导入它
import *
浏览 6提问于2017-09-17得票数 1
回答已采纳
2回答
我正在开发Flash中的图像上传器。我使用FileReference.browse浏览图像，然后将图像大小调整为1000 x 1000 px，如果图像非常大，然后上传到服务器。我想为图片上传进度显示进度条。
我使用URLLoader来发送调整大小的图像的二进制数据，但是ProgressEvent on URLLoader的工作方式并不像预期的那样工作。它只在图像上传完成后才被触发，而不是显示中间的进度。ProgressEvent on FileReference很好地显示了中间图像上传过程。
是否有一种使用URLLoader显示上传进度的方法？或
我们是否可以使用FileReference加载
浏览 6提问于2009-10-02得票数 8
1回答
在Kubuntu11.10，我可以点击托盘图标和洪水的窗口显示，但现在12.04，什么都没有发生。只有右键单击工作，它显示上下文菜单，但没有图标。另外，当我将鼠标悬停在托盘图标上时，它不会显示带有下载/上传统计信息的工具提示。
有谁知道如何用鼠标左键点击它的托盘按钮就能让洪水发生反应吗？
📷
浏览 0提问于2012-07-21得票数 0
回答已采纳
我使用ng-file-upload将多个文件上传到服务器。服务器会在一段时间(~10秒)后响应。在这个时候，我想在屏幕上显示一个微调器。
我现在展示了一个像这样的旋转器
<img src="http://www.ajaxload.info/cache/ff/ff/ff/00/00/00/8-0.gif"/>
但它是永久存在的。我如何才能使它只在响应从服务器返回之前出现？
我的上传代码如下：
Upload.upload({
url: 'http://localhost:8080/myapp',
浏览 4提问于2017-02-07得票数 1
回答已采纳
5回答
我正在使用Alamofire网络库来提出请求。
我正在执行几个不同的任务，比如。
下载文件
上传文件
员额请求
但是，网络活动指示符没有显示在任何操作的状态栏中。
可能导致这种行为的原因是什么？
这是担心的事情吗？
浏览 12提问于2016-05-02得票数 1
回答已采纳
1回答
我需要一个应用程序指示器来显示当前的下载和上传网络的速度。它应该用文本写在面板本身。比如“向上:0.5 MBps下降:1 MBps”。是否有任何应用指标可以做到这一点，或者有一个简单的方法来自己制作？
迪格维杰
浏览 0提问于2012-06-08得票数 1
回答已采纳
我尝试使用，它使用npm下载它，然后在单个文件中浏览它。错误的详细信息可以看到
我无法理解这些错误，因为现在我还不熟悉AngularJS。这是我的密码
var angular = require('angular');
angular
.module('jobApp', [require('angular-material'), require('ng-file-upload')])
.controller('MainCtrl', ['$rootScope', '$scope
浏览 1提问于2015-06-12得票数 11
我使用ng-file-upload指令将文件上传到应用程序中的nodejs。现在，在上传之前，我正在尝试压缩图像。为此，我尝试使用压缩方法的Java图像压缩(JIC)库。它正在成功地压缩图像。现在，问题是，我必须向我的服务器(Nodejs)发送一个文件对象，但是压缩方法返回一个带有src属性的图像。有没有办法用url获取文件对象？或者其他其他方法来实现在angularjs上的压缩并上传到nodejs？任何帮助都很感激。
浏览 3提问于2015-07-14得票数 0
我正在使用指令上传文件，我对使用苹果设备拍摄的图像或照片有问题，我知道苹果在图像上包含exif方向数据以正确查看苹果设备，但当这些图像上传到web应用程序上时，浏览器的方向是错误的。
我在我的应用程序上的几个视图中使用了这个指令，因为time reazon更改为另一个像ng-file-upload不是最好的选择。
还有一些其他的指令可以解决这个问题，比如，但是我想知道如何通过onBeforeUploadItem事件来修复这个问题。
浏览 1提问于2016-02-16得票数 2
1回答
我想显示自定义加载程序或图像，直到我的文件将上传到服务器从驱动器。如何将自定义加载程序或图像设置为“setLoadIndicator”？我已经实现了应用程序脚本插件的驱动器。不显示错误的SpreadsheetApp.getActive().addToUi()
var buttonActionSelect = CardService.newAction().setFunctionName("MyMethod").setLoadIndicator(SpreadsheetApp.getActive().addToUi()).setParameters({selectedItems:
浏览 8提问于2022-08-26得票数 0
我使用的是laravel angular设置。
我也尝试使用ng-file-upload，就像这里描述的那样。
我在设置我的项目来访问这个ngFileUpload指令时遇到了问题，它在安装中说。( )
<script src="angular(.min).js"></script>
<script src="ng-file-upload-shim(.min).js"></script> <!-- for no html5 browsers support -->
<script src="
浏览 6提问于2016-07-19得票数 0
1回答
我有一个UITableView，其中充满了显示文件名的单元格，这些单元格还指示文件的上传/下载进度。当文件被移动时，其相应的单元格应该在其附件视图中显示一个UIActivityIndicatorView。我已经设置了一个UIActivityIndicatorView，可以在viewDidLoad、中使用，但是当我试图将它设置为多个单元格的附件视图时，它只出现在 one 中。
-(void)viewDidLoad {
[super viewDidLoad];
activityIndicator = [[UIActivityIndicatorView alloc] initWi
浏览 4提问于2012-07-07得票数 0
回答已采纳
1回答
我正在努力让ng文件上传到我的angularjs项目，该项目使用webpack。我通过npm安装了ng文件上传，并将它添加到我的主app.js中。
var ngFileUpload = require('../../node_modules/ng-file-upload/dist/ng-file-upload.min');
module.exports = angular.module('app', [ngFileUpload])
但我还是得到了：
Uncaught Error: [$injector:modulerr] Failed to instantiat
浏览 1提问于2016-08-20得票数 4
回答已采纳
我遇到了cffileupload标签的问题，然后将上传文件的名称插入到数据库中。似乎没有从CF操作页面返回的钩子，这些钩子会显示是否成功、文件是否已重命名、新文件名是什么，以及
基本上，我希望用户能够上传多个文件(最多10个)，没有超时和在数据库中存储的文件的名称。
欢迎任何建议！我在互联网上到处寻找，似乎没有任何优雅的解决方案。
浏览 0提问于2010-12-22得票数 0
回答已采纳
我在angularjs中使用ng-file-upload时遇到了这个问题。即使上传正在后端进行(node-js代码)，chrome在2分钟后超时并抛出net::ERR_EMPTY_RESPONSE。我尝试添加超时 Upload.upload({
url: uploadFileAPI,
fields: uploadjson,
file: file,
timeout: 600000
}) 但它仍然不起作用。接口响应时间为4-5分钟，2分钟后调用超时。有人能帮帮忙吗？
浏览 58提问于2020-07-09得票数 1
回答已采纳
我无法使用Win7+Safari在Angular.js中使用ng-file-upload上传文件。下面是我的代码：
<div ng-repeat="mul in mulImage">
<input type="file" class="filestyle form-control" data-size="lg" name="upload_{{$index}}" id="bannerimage_{{$index}}" ng-model="mul.image"
浏览 14提问于2016-09-03得票数 1
1回答
我正在使用ng-file-upload库将文件发布到我的后端Web Api。文件发布后，我将其保存到以下文件夹中
"~/App_Data/Tmp/FileUploads/"
并将路径保存到我的数据库中。
现在，当我进入编辑模式时，我想预览所有上传的文件(照片)。但是当我使用像这样的
ng-src="path"
我得到了
"Not allowed to load local resource"
当从磁盘提供文件时，这是正确的方法吗？
浏览 1提问于2015-08-30得票数 0
2回答
我正在为我的AngularJS应用程序编写测试，使用量角器和jasmine。
我正在使用下面的代码测试文件上传案例：
const fileElem = element(by.css('input[type="file"]'));
fileElem.sendKeys(absoluteFilePath);
browser.sleep(500);
它与下一个包一起在本地工作：
"chromedriver": "2.38.2", "protractor": "5.3.1", Chrome - v.66.
浏览 0提问于2018-05-02得票数 2
3回答
我需要一个Ubuntu14.04的净速指示器小程序。在Ubuntu12.04中，我安装了它，如：如何在Ubuntu面板上显示网络上传/下载速度所示，但这在Ubuntu14.04中不起作用。
浏览 0提问于2014-04-25得票数 9
2回答
在AWS S3桶上上传大型文件
、、、、
我试图上传大文件(PDF，视频)通过我的角度网页应用到AWS s3 bucket。我使用ng-file-upload上传文件到我的节点服务器，在节点上我使用multer-s3 npm包。
对于小文件来说，它运行得很好，正如预期的那样。但我无法上传大型文件使用。这也没有给我带来任何错误。它只是不上传文件(如果文件很大)，甚至不输入回调并获得超时。有办法处理上传大文件到s3桶吗？
var uploadSingle = upload.single('uploadFile');
router.post('/uploadVideo',function(req,res,n
浏览 4提问于2017-04-20得票数 0
2回答
结束tcp消息的最佳实践是什么？我现在有了自己的自定义字符串，但我偏执地认为，在盲目幸运的情况下，有可能在线路上传输一些可以包含您的结束消息字符/string的东西。
SMTP服务器接受Enter键，但是如果一个和平的文本在其中有“enter”，并在网络上传输，这不会让人抓狂吗？
我想在这方面得到一些想法。
谢谢
浏览 1提问于2012-02-23得票数 1
回答已采纳
我尝试使用ng-file-upload指令()将文件上传功能添加到我的项目中，但一直收到以下错误：
Error: [$injector:unpr] http://errors.angularjs.org/1.4.6/$injector/unpr?p0=UploadProvider%20%3C-%20Upload%20%3C-%20ExperimentController
at Error (native)
at http://localhost:8000/static/editor/js/angular.min.js:6:416
at http://localhost:8000/static/
浏览 0提问于2015-10-20得票数 4
1回答
我使用ansible设置ftp服务器，并通过从我的本地主机手动执行lftp来验证它是否正常工作 我使用put上传了一个文件，当我使用ls时，可以在ftp服务器中找到该文件。 我写了一个脚本上传文件到ftp服务器，它总是返回成功。但是，我找不到我用我的play上传的文件。然后我编辑了我的剧本来显示结果寄存器，发现了一个警告。见下文 ---
- name: test ftp upload
hosts: localhost
tasks:
- name: install lftp
yum:
name: lftp
- name: upload fil
浏览 17提问于2020-04-04得票数 0
回答已采纳
使用NSURLSessionUploadTask从资产库上传多张照片的最佳方法是什么？
我现在使用的是NSURLSession背景上传。下面是我使用的代码：
NSArray *paths = NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES);
NSString *documentsDirectory = [paths objectAtIndex:0]; //getting path of documents directory.
NSString *documentsP
浏览 4提问于2014-08-21得票数 1
回答已采纳
1回答
我试图在浏览器中使用ng-file-upload上传一个ng-file-upload文件，并在后端播放Scala2.5.x。
如果我在播放中使用moveTo，则会上载该文件，但该文件是由头文件和拖车生成的，而不是普通文件：
request.body.moveTo(new File("c:\\tmp\\uploaded\\filetest.csv"))
有办法只保存数据部分吗？
或者，我尝试了以下方法
def doUpload = Action(parse.multipartFormData) { request =>
println(request.co
浏览 10提问于2016-10-18得票数 0
回答已采纳
我使用ng-file-upload插件上传文件，我想选择具有特定扩展名的文件。在我的例子中，它是.info.system.yaml扩展。我看过一些例子，只看到了短的变体，如.pdf、.docs等等。
基于ngf-pattern="'.info.system.yaml'"和ngf-accept=".info.system.yaml"，我尝试过，但它不起作用。
<button class="btn btn-default"
ngf-select="selectFiles($files, $invalidFile
浏览 6提问于2019-05-27得票数 1
1回答
我需要一个非常简单的例子。我只想使用ng-file-upload将文件主体放到视图控制器中定义为二进制数组的对象字段中。我不需要将文件上传到服务器上的文件系统。ng-file-upload的文档相当复杂。提前谢谢。
这是我到目前为止所知道的：
<form name="form" ng-submit="vm.save()">
<div class="widget-content user">
Business Logo: <input type=&#
浏览 4提问于2016-03-25得票数 0
Mu current form使用常见的表单文件输入：
<form method="POST" enctype="multipart/form-data">
<input type="file" name="file">
</form>
有没有可能使用ng-file-upload指令来代替输入，以利用它的ngf-drop和ngf-select (例如，简单地显示文件信息)，以及轻松地设置样式，而不使用AJAX？
浏览 4提问于2016-04-01得票数 0
当我想上传图片时，我收到错误的Required request part 'file' is not present。
我打算上传视频和图片。视频上传效果很好，但图像不起作用。
这是我的代码。
弹簧靴
@ApiOperation(value = "Post new file")
@RequestMapping(value = "/", method = RequestMethod.POST)
public String handleFileUpload(@RequestParam("file") MultipartFi
浏览 1提问于2016-11-23得票数 4
1回答
带指示符的后台迅速张贴
、、、
我正在尝试创建一个社交应用程序，用户可以在其中发布。
它有一个tableView，它有两个部分
0: depending posts
1: posts
Post数据如下所示：
id: Int
post: String
uploading: Bool = true
如果用户单击“写一个新帖子”，就会出现一个新的，该VC将处理上传的帖子
当用户发送他的帖子时，它被立即添加到depending posts中，然后应用程序弹出到根VC，+它启动一个URL会话
self.dismiss(animated: true, completion: {
PostFunctions.shared.post
浏览 0提问于2018-08-15得票数 0
当用户再次尝试上载时，ng-file-upload会删除之前已上载的现有文件。如果用户改变了替换文件的想法，单击了错误的文件上传按钮，或者他们在选择替换文件时想要查看当前已上传的文件，这可能会导致重复的文件上传。 我认为ngf-keep="distinct"可能会这样做，但它仍然会立即删除旧文件。 如何在不删除旧文件的情况下简单地替换旧文件？ 另一种选择是使用ngf-before-model-change事件，如果更改为空，则拒绝更改。但是，如何做到这一点呢？ 我尝试传递旧值，如果模型值为空，则将模型值设置为该旧值。但是，如果模型值由于验证失败而变为null怎么办？
浏览 9提问于2019-02-26得票数 0
我有这个函数，它抛出异常：
$scope.uploadAvatar = function(avatar, user) {
Upload.upload({
url: 'api/v1/user' + user.id + '/',
avatar: avatar,
method: 'put'
})
};
TypeError: Upload.upload不是一个函数
我的剧本包括：
<script src="/static/js/main.js">&l
浏览 1提问于2016-06-28得票数 4
回答已采纳
我正在构建一个形象管理工具，我想知道我如何能够创造一个类似Vimeo的体验。
对需要发生什么的描述
用户将能够使用 (不重新加载页面)上传许多可能很大的图像。然后，服务器将对每个上传的图像执行以下操作。
图像将被调整成几个版本(例如拇指、小、中、大)。
每个拷贝都会做一些图像处理(例如卷积滤波器)。
这些调整大小的副本将上载到Amazon上。
关于每个图像的信息将存储到数据库中(宽度、高度、类型、文件名)。
然后服务器应该触发对用户的某种反馈。
提供同步反馈的
Plupload (图像上传工具)在将文件上传到我的服务器时有很好的视觉反馈，但是我希望能够在服务器进行所
浏览 1提问于2011-03-18得票数 6
在我的用户界面(angularjs)中，我创建了新行。每一行都有文件上传按钮。我想上传所有文件连同元数据，并将每一行保存在一个调用中。我发布到Nodejs的复杂对象有点像下面所示
var activity = {
"Id" : 1,
"Name" : "Test",
"Steps" : [
{
"StepId":1,
"FileUrl": {fileObject} // this property if bound with the file upload
浏览 2提问于2016-06-21得票数 0
回答已采纳
1回答
我试图用javascript制作一个基于浏览器的youtube视频上传器。
我正在使用
经过认证，当我上传视频时，向youtube服务器发送请求永远不会结束，视频也不会上传。
这也发生在。
下面是我用来上传视频的功能：
$('#upload').click(function(){
$('#upload').attr('disabled', true);
var title = escapeXmlEntities($('#title').val());
var description = escapeXml
浏览 2提问于2013-11-01得票数 0
回答已采纳
3回答
我正在尝试将一个带有文本字段和文件的表单上传到我的WebAPI。目前，我总是收到415错误( ASP控制器中的断点没有被击中)。我的代码如下所示：
角业务
// 'Upload' is from ng-file-upload
function applicationService(settings, $http, Upload) {
var createCustomApplication = function(application) {
var url = settings.baseUrl + '/api/applications/custom';
浏览 2提问于2016-02-24得票数 1
回答已采纳
1回答
我有简单的图片上传通过action和mutation。主要的事情是，我首先要存储预加载器，然后，当图像上传到服务器时，显示图像并删除预加载器。
export default new Vuex.Store({
state: {
images: [],
},
mutations: {
addImage(state, image) {
state.images.push(image);
}
},
actions: {
saveImage({commit}, image) {
浏览 9提问于2018-07-25得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
