当前位置： 移动技术网 > IT编程>开发语言>.net > WebAPI Angularjs 上传文件

WebAPI Angularjs 上传文件

2018年10月09日  | 移动技术网IT编程  | 我要评论

美国大片国语版,广州邮政编码,早教知识网

直接上代码

html页面代码：

 

<label>资源url</label>
<input type="text" class="form-control" id="txtsourceurl" name="txtsourceurl" 
　　　　　　　　　　ng-model="editdata.sourceurl"  placeholder="资源url" ng-maxlength="500">
<!--文件地址展示-->            
　　
<button id="choosefile" onclick="$('#fileupload').click()">选择文件上传</button> 
<!--加这个控件是实现选择文件上传文件功能，减少页面上控件的数量，方便样式的调整-->
            
<input id="fileupload" type="file" onchange="$('#uploads').click()" style="display: none;" /> 
<!--浏览器自带的上传文件控件，我也想过change事件直接调用save()方法，但是好像不管用，我只好通过这种中转调用了，大家有知道的告诉我-->

<button ng-click="save()" id="uploads" style="display: none;">确定上传</button> 
<!--必须使用其他控件(按钮或者标签)调用上传（save()）方法-->

 

 

 

controller.js代码

    app.controller('editcontroller', ['$scope', "$http", 'webconfig', function ($scope, $http, webconfig) {
        $scope.save = function () {
            var fd = new formdata();
            var file = document.queryselector('input[type=file]').files[0];
            fd.append('logo', file); //angular 上传的文件必须使用特殊的格式处理，不是json格式
            $http({
                method: 'post',
                url: webconfig.apiroot + "/api/ecategorydetail/postfiles", //"https://localhost:44320//api/ecategorydetail/postfiles"
                data: fd,
                headers: { 'content-type': undefined }, // 写成是undifined，浏览器才自动转化为 文件上传的类型
                transformrequest: angular.identity
            }).success(function (response) {
                //上传成功的操作
                if (response.mark) //接口返回的数据标志位，是否保存成功，保存成功则把文件相对地址更新到实体中
                    $scope.editdata.sourceurl = response.result;
                else
                    alert("上传失败");
            });
        };
    }]);

webapi代码：

        /// <summary>
        /// 上传文件
        /// </summary>
        [httppost, route("api/ecategorydetail/postfiles")]
        public ihttpactionresult postfiles()
        {
            var result = "";
            var filelist = httpcontext.current.request.files;
            var mark = true;
            if (filelist.count > 0)
            {
                for (var i = 0; i < filelist.count; i++)
                {
                    var file = filelist[i];
                    var filename = file.filename;
                    var virtualpath = "/uploadfile/files/";
                    var path = httpcontext.current.server.mappath(virtualpath);//文件全路径
                    if (!directory.exists(path))
                    {
                        directory.createdirectory(path);
                    }
                    var filepath = $"{path }{filename}";
                    try
                    {
                        file.saveas(filepath);
                        result = $@"{virtualpath}{filename}";
                    }
                    catch (exception ex)
                    {
                        result = "上传文件写入失败：" + ex.message;
                        mark = false;
                    }
                }
            }
            else
            {
                result = "上传的文件信息不存在！";
                mark = false;
            }

            var json = new { result, mark };
            return ok(json);
        }

 

有疑问欢迎交流。

 

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网