Javascript 如何在MVC中使用AngularJS上传文件

由于我是AngularJS新手，我不知道如何使用AngularJS在MVC中上传文件。 我正在尝试上载一些没有任何特定类型或扩展名的文件，但失败

我创建了一个javascript文件，该文件具有-

这是serviceJS-

    var app = angular.module("app", []);        
    app.service('FileUploadService', ['$http', function ($http) {      
            this.uploadFileToUrl = function (file,  uploadUrl) {    
            var fd = new FormData();   
            fd.append('file', file);   
            $http.post(uploadUrl, fd, {   
                transformRequest: angular.identity,   
                headers: { 'Content-Type': undefined }   
            })   
            .success(function () {   
            })    
            .error(function () {    
            });     
        }   
    }]);

这是控制器部分-

    app.controller('FileUploadController', ['$scope', 'FileUploadService', function($scope, FileUploadService) { 
            $scope.uploadFile = function () {
            var file = $scope.myFile;
            console.log('file is ');
            console.dir(file);
            var uploadUrl = "/Home/FileUploadFromAngular";
            FileUploadService.uploadFileToUrl(file, uploadUrl);
        };
    }]);

在查看页面中

 <script src="~/Scripts/angular.min.js"></script>
<script src="~/Scripts/AngScript/FileUpload.js"></script>
<script src="~/Scripts/angular-ui/ui-bootstrap.min.js"></script>
    <div ng-controller="FileUploadController">
        <input type="file" ng-model="myFile" />
        <button ng-click="uploadFile()">Upload</button>
    </div>

上传

它将myFile作为控制器中的未定义文件。我无法对此进行调试。
提前谢谢。

试试这个。 控制器

/****文件上传*****/

   $scope.upload = [];
    $scope.fileUploadObj = {
        "ID": $rootScope.filesReturn.id
    }

    $scope.onMultiFileSelect = function ($files) {
        //$files: an array of files selected, each file has name, size, and type.
    $scope.errArr = [];
    for (var i = 0; i < $files.length; i++) {
        var $file = $files[i];
        if ($file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' || $file.type === 'application/vnd.ms-excel') {
            (function (index) {
                $scope.upload[index] = $upload.upload({
                    url: host + 'api/Return/ReturnUpload',
                    method: "POST",
                    data: { fileUploadObj: $scope.fileUploadObj },
                    file: $file
                }).progress(function (evt) {
                    // get upload percentage Can hook to some Load view thing
                    //console.log('percent: ' + parseInt(100.0 * evt.loaded / evt.total));
                }).success(function (data, status, headers, config) {
                    // file is uploaded successfully
                    $scope.chkErr();
                }).error(function (data, status, headers, config) {
                    // file failed to upload
                    $scope.setErr(data.returnDataErr);
                    $scope.chkErr();
                });
            })(i);
        }
        else
        {
            $scope.setErr($file.name + " is not an .xls .xlsx");
            $scope.chkErr();
            (i);
        }
    }//END FOR
    $scope.abortUpload = function (index) {
        $scope.upload[index].abort();
    }
}
//check if there is errormsg in array.
$scope.chkErr = function () {
    if ($scope.errArr.length > 0) {
        //IS ERROR
        $scope.errorUpload = true;
        $scope.$apply();
        //$scope.errorMessage = data.returnDataErr;
    }
    else {
        //IS SUCCESS
        $scope.noFiles = false;
        $scope.errorUpload = false;
        $scope.getFiles();
    }
}

$scope.upload=[]；
$scope.fileUploadObj={
“ID”：$rootScope.filesrurn.ID
}
$scope.onMultiFileSelect=函数（$files）{
//$files：选定文件的数组，每个文件都有名称、大小和类型。
$scope.errArr=[]；
对于（变量i=0；i<$files.length；i++）{
var$file=$files[i]；
如果（$file.type=='application/vnd.openxmlformats officedocument.spreadsheetml.sheet'| |$file.type=='application/vnd.ms excel'）{
（功能（索引）{
$scope.upload[index]=$upload.upload({
url:host+'api/Return/ReturnUpload'，
方法：“张贴”，
数据：{fileUploadObj:$scope.fileUploadObj}，
文件：$file
}).进度（功能（evt）{
//获取上传百分比可以挂钩到一些加载视图的东西
//log（'percent:'+parseInt（100.0*evt.loaded/evt.total））；
}).success（函数（数据、状态、标题、配置）{
//文件已成功上载
$scope.chkErr（）；
}).error（函数（数据、状态、标题、配置）{
//文件上载失败
$scope.setErr（data.returnDataErr）；
$scope.chkErr（）；
});
})（i） )；
}
其他的
{
$scope.setErr（$file.name+“不是.xls.xlsx”）；
$scope.chkErr（）；
（i） )；
}
}//结束
$scope.abortUpload=函数（索引）{
$scope.upload[index].abort（）；
}
}
//检查数组中是否存在errormsg。
$scope.chkErr=函数（）{
如果（$scope.errar.length>0）{
//是错误吗
$scope.errorUpload=true；
$scope.$apply（）；
//$scope.errorMessage=data.returnDataErr；
}
否则{
//这就是成功
$scope.noFiles=false；
$scope.errorUpload=false；
$scope.getFiles（）；
}
}

查看

                            <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
                                <input style="float:left" type="file" ng-file-select="onMultiFileSelect($files)" multiple>
                                <div style ="float:left">
                                    <a ng-show="!noFiles" class=" btn btn-default btn-xs" ng-click="confirmClick() && deleteItem()" confirm-click data-localize="DELETE">
                                        Delete All
                                    </a>
                                </div>
                            </div>

全部删除

API或MVC控制器

  [Route("ReturnUpload")]
    [HttpPost]
    public async Task<HttpResponseMessage> ReturnUpload()
    {
        if (!Request.Content.IsMimeMultipartContent())
        {
            this.Request.CreateResponse(HttpStatusCode.UnsupportedMediaType);
        }

        try
        {
            var provider = GetMultipartProvider();
            var result = await Request.Content.ReadAsMultipartAsync(provider);

            //JSON data from upload ( returns id )
            var returns = GetFormData<UploadReturnBindingModel>(result) as UploadReturnBindingModel;

            //Get original FileName from result
            var originalFileName = GetDeserializedFileName(result.FileData.First());

            //Get data from UplaodedFile info.  paths created time etc.
            var uploadedFileInfo = new FileInfo(result.FileData.First().LocalFileName);

            var ret = db.ReturnRecords.Single(a => a.id == returns.ID);
            var tenantId = db.Users.Find(User.Identity.GetUserId()).Tenant.id;
            var entityId = ret.entityId;
            if (ret.status == ReturnStatus.Converting.ToString())
            {
                // If you want to send something to the .error callback, 
                var returnDataErr = "Convertion in Progress, try again later";
                return this.Request.CreateResponse(HttpStatusCode.BadRequest, new { returnDataErr });
            }

            var ToDir = uploadedFileInfo.DirectoryName + "\\" + tenantId + "\\" + entityId + "\\" + returns.ID + "\\Upload\\";
            if (!Directory.Exists(ToDir))
            {
                Directory.CreateDirectory(ToDir);
            }
            else if (System.IO.File.Exists(ToDir + originalFileName))
            {
                var toDelete = db.FileRecords.Single(a => a.path + a.name == ToDir + originalFileName && a.returnId == returns.ID);
                db.FileRecords.Remove(toDelete);
                System.IO.File.Delete(ToDir + originalFileName);
            }
            System.IO.File.Move(uploadedFileInfo.FullName, ToDir + originalFileName);

            var file = new Portal.Models.File();
            file.userName = db.Users.Find(User.Identity.GetUserId()).UserName;
            file.name = originalFileName;
            file.path = ToDir;
            file.returnId = returns.ID;
            file.timeStamp = DateTime.Now;
            //var createdTime = uploadedFileInfo.CreationTime;
            //var currentUser =  User.Identity.GetUserId();
            db.FileRecords.Add(file);


            // Update the ret status that files has been uploaded.
            ret.status = ReturnStatus.DocumentsUploaded.ToString();

            db.SaveChanges();


        }
        catch(Exception ex)
        {
            // If you want to send something to the .error callback, use the HttpStatusCode.BadRequest instead
            log.Error(ex);
            var returnDataErr = "Failed creating file";
            return this.Request.CreateResponse(HttpStatusCode.BadRequest, new { returnDataErr });
        }
        // Through the request response you can return an object to the Angular controller
        // You will be able to access this in the .success callback through its data attribute
        var returnDataOk = "OK";
        return this.Request.CreateResponse(HttpStatusCode.OK, new { returnDataOk });
    }

[路由（“返回上载”）]
[HttpPost]
公共异步任务ReturnUpload（）
{
如果（！Request.Content.IsMimeMultipartContent（））
{
this.Request.CreateResponse（HttpStatusCode.UnsupportedMediaType）；
}
尝试
{
var provider=GetMultipartProvider（）；
var result=wait Request.Content.ReadAsMultipartAsync（提供程序）；
//上传的JSON数据（返回id）
var返回=作为UploadReturnBindingModel的GetFormData（结果）；
//从结果中获取原始文件名
var originalFileName=GetDeserializedFileName（result.FileData.First（））；
//从UplaodedFile info获取数据。路径创建时间等。
var uploadedFileInfo=newfileinfo（result.FileData.First（）.LocalFileName）；
var ret=db.ReturnRecords.Single（a=>a.id==returns.id）；
var tenantId=db.Users.Find（User.Identity.GetUserId（））.Tenant.id；
var entityId=ret.entityId；
if（ret.status==ReturnStatus.Converting.ToString（））
{
//如果要向.error回调发送内容，
var returnDataErr=“正在进行转换，请稍后重试”；
返回this.Request.CreateResponse（HttpStatusCode.BadRequest，新的{returnDataErr}）；
}
var ToDir=uploadedFileInfo.DirectoryName+“\\”+tenantId+“\\”+entityId+“\\”+returns.ID+“\\Upload\\”；
如果（！Directory.Exists（ToDir））
{
创建目录（ToDir）；
}
else if（System.IO.File.Exists（ToDir+originalFileName））
{
var toDelete=db.FileRecords.Single（a=>a.path+a.name==ToDir+originalFileName&&a.returnId==returns.ID）；
db.FileRecords.Remove（toDelete）；
System.IO.File.Delete（ToDir+originalFileName）；
}
System.IO.File.Move（uploadedFileInfo.FullName，ToDir+originalFileName）；
var file=new Portal.Models.file（）；
file.userName=db.Users.Find（User.Identity.GetUserId（））.userName；
file.name=原始文件名；
file.path=ToDir；
file.returnId=returns.ID；
file.timeStamp=DateTime.Now；
//var createdTime=uploadedFileInfo.CreationTime；
//var currentUser=User.Identity.GetUserId（）；
db.FileRecords.Add（文件）；
//更新已上载文件的ret状态。
ret.status=ReturnStatus.documentsupload.ToString（）；
db.SaveChanges（）；
}
捕获（例外情况除外）
{
//如果要向.error回调发送内容，请改用HttpStatusCode.BadRequest
日志错误（ex）；
var returnDataErr=“创建文件失败”；
返回this.Request.CreateResponse（HttpStatusCode.BadRequest，新的{returnDataErr}）；
}
//通过请求
angular.module("app.directives", []).directive('fileUpload', function () {
return {
    scope: true,
    link: function (scope, el, attrs) {
        el.bind('change', function (event) {
            var files = event.target.files;
            //iterate files since 'multiple' may be specified on the element
            if(files.length == 0){
                scope.$emit("fileSelected", { file: null, field: event.target.name });
            } else{
                for (var i = 0;i<files.length;i++) {
                    //emit event upward
                    scope.$emit("fileSelected", { file: files[i], field: event.target.name });
                }
            }
        });
    }
};
});

$scope.$on("fileSelected", function (event, args) {
    $scope.$apply(function () {
        switch (args.field) {
            case "myFile":
                $scope.myFile = args.file;
                break;
            default:
                break;
        }
    });
});

this.uploadFileToUrl = function (file,  uploadUrl) { 
    return $http({
        method: 'POST',
        url: uploadUrl,
        headers: { 'Content-Type': undefined },
        transformRequest: function() {
            var formData = new FormData();
            if(file){
               formData.append("myFile", file); 
            }
            return formData;
        }
    })
}

<input class="input-sm" type="file" ng-model="Registration_CTRL.IDProdf" onchange="angular.element(this).scope().FN_UPLOAD_FILE(event)" multiple />

$scope.FN_UPLOAD_FILE = function (evt) {
        var _file = new File([""], evt.target.file);
        var a = evt.target.files;
        var _formData = new FormData();
        _formData.append("IDPROOF", evt.target.files[0]);
        _formData.append("EMPID", $scope.Registration_CTRL.ID);
        $http({
            method: 'POST',
            url: '@Url.Action("Upload_Employee_IDProof", "Registration")',
            headers: { 'Content-Type': undefined },
            data: _formData
        }).then(function (data) {
            $scope.Registration_CTRL.IDProdf = data.data.aaData;
        });
    }

[HttpPost]
public JsonResult Upload_Employee_IDProof()
{
    string _fileName = "";
    try
    {
        if (Request.Files.Count > 0)
        {
            var _empid = int.Parse(Request.Form["EMPID"]);
            var _file = Request.Files[0];
            var _fName = Request.Files["IDPROOF"].FileName;
            var _dotIndex = _fName.LastIndexOf('.');
            var _ext = _fName.Substring(_dotIndex);
            var _configpath = RequestHelpers.RequestHelpers.GetConfigurationValue("IDProofPath");
            _fileName = _empid + "_IDPROOF" + _ext;
            var _dirPath = Server.MapPath(_configpath);
            var _filePath = Server.MapPath(_configpath) + _fileName;
            if (System.IO.Directory.Exists(_dirPath))
            {
                if (System.IO.File.Exists(_filePath))
                {
                    System.IO.File.Delete(_filePath);
                }
                _file.SaveAs(_filePath);
            }
            else
            {
                System.IO.Directory.CreateDirectory(_dirPath);
                _file.SaveAs(_filePath);
            }
        }
    }
    catch (Exception ex)
    {
        return Json(new { aaData = ex.Message }, JsonRequestBehavior.AllowGet);
    }
    return Json(new { aaData = _fileName }, JsonRequestBehavior.AllowGet);
}