angularjs 图片上传

最新推荐文章于 2025-07-01 13:25:01 发布

snrzk

最新推荐文章于 2025-07-01 13:25:01 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端 angularjs

本文链接：https://blog.csdn.net/snrzk/article/details/80402563

前端同时被 2 个专栏收录

1 篇文章

订阅专栏

angularjs

1 篇文章

订阅专栏

本文介绍如何使用AngularJS结合ng-file-upload插件实现图片上传功能，包括HTML表单设计、AngularJS控制器中处理文件上传的方法及后端接收处理流程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<input type="file" alt="选择图片..." ngf-select="uploadFiles($files,$invalidFiles)" ng-model="img.file" name="img.file" ngf-pattern="'image/*'"
                            ngf-accept="'image/*'" ngf-max-size="20MB" ngf-min-height="100" ngf-multiple="true" 
                            ngf-resize="{width: 100, height: 100}">
                            
                            <div class="c-panel-body" style="width: 753px; height: 130px;">
                                <ul id="evaluationImg">

                                </ul>
                            </div>

ngf-multiple="true"  --是否可以上传多张

 app.controller('commentsListCtrl', function (NgTableParams, $http, $scope, ngDialog, Upload) {
$scope.uploadFiles = function (files, errFiles) {
                    $scope.files = files; //上传信息
                    $scope.errFiles = errFiles;
                    angular.forEach(files, function (file) {
                        Upload.upload({
                            url: 'url/index.aspx',
                            data: { file: file }
                        }).success(function (data) {
                            //回调图片保存路径等信息
                        }).error(function () {
                            logger.log('error');
                        });
                    });
                };
});

public ActionResult Index()
        {
            HttpRequest request = System.Web.HttpContext.Current.Request;
            HttpFileCollection fileCollect = request.Files;

            string fileName = string.Empty;
            if (fileCollect.Count > 0)          //如果集合的数量大于0
            {
                foreach (string str in fileCollect)
                {
                    HttpPostedFile file1 = fileCollect[str];  //用key获取单个文件对象HttpPostedFile
                    //.....存储操作
                }
            }

            
        }

参考:

https://github.com/danialfarid/ng-file-upload

https://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/angularjs-ng-file-upload/