angularjs 文件上传

github连接地址：https://github.com/danialfarid/ng-file-upload

核心代码：

html:

<div class="form-group">

                <label>源文件：</label>

                <input class="form-control h30 w356"  ng-model="data.filePath"/>

                <select class="form-control h30 w143">

                    <option value="">1</option>

                    <option value="">2</option>

                </select>

                <div class="button" ngf-select="fileChanged($file)">Upload on file select</div>

            </div>

js：

//var app = angular.module('main.app', ['bw.paging', 'cbc.datePicker', 'ngFileUpload']);

//app.controller('main-controller', function ($scope, $http, $log, $rootScope,
Upload) {

$scope.fileChanged = function (file) {

        Upload.upload({

            url: '/ImportSettlement/Upload',

            data: { file: file }

        }).then(function (resp) {

            console.log('Success ' + resp.config.data.file.name + 'uploaded. Response: ' + resp.data);

        }, function (resp) {

            console.log('Error status: ' + resp.status);

        });

    }

后台代码：

[HttpPost]

        public ActionResult Upload(HttpPostedFileBase file)

        {

            if (file == null)

            {

                return Content("没有文件！", "text/plain");

            }

            var fileName = Path.Combine(Request.MapPath("~/Upload"), Path.GetFileName(file.FileName));

            try

            {

                return Content("上传异常 ！", "text/plain");

                //file.SaveAs(fileName);

                ////tm.AttachmentPath = fileName;//得到全部model信息

                //tm.AttachmentPath = "../upload/" + Path.GetFileName(file.FileName);

                ////return Content("上传成功！", "text/plain");

                //return RedirectToAction("Show", tm);

            }

            catch

            {

                return Content("上传异常 ！", "text/plain");

            }

        }

上述代码兼容IE10及以上浏览器，兼容IE9代码如下：

Html:

引入ng-upload-file组件

<script src="/Scripts/angular/FileUpload/ng-file-upload.min.js"></script>

<script>

    //optional need to be loaded before angular-file-upload-shim(.min).js

    FileAPI = {

        debug: true,

//                forceLoad: true,

//                html5: false, //to debug flash in HTML5 browsers

        jsUrl: '/Scripts/angular/FileUpload/FileAPI.min.js',

        flashUrl: '/Scripts/angular/FileUpload/FileAPI.flash.swf',

    };

</script>

  <!--  for no html5 browsers support -->

<script src="/Scripts/angular/FileUpload/ng-file-upload-shim.min.js"></script>

--------------------上传部分

<div class="button" ngf-select="fileChanged($file)">Upload on file select</div>

js执行

//var app = angular.module('main.app', ['bw.paging', 'cbc.datePicker', 'ngFileUpload']);

//app.controller('main-controller', function ($scope, $http, $log, $rootScope, Upload) {

$scope.fileChanged = function (file) {

        Upload.upload({

            url: '/ImportSettlement/Upload',

            data: { file: file }

        }).then(function (resp) {

            console.log('Success ' + resp.config.data.file.name + 'uploaded. Response: ' + resp.data);

        }, function (resp) {

            console.log('Error status: ' + resp.status);

        });

    }

后台接收：

[HttpPost]

        public ActionResult Upload(HttpPostedFileBase file)

        {

            if (file == null)

            {

                return Content("没有文件！", "text/plain");

            }

            var fileName = Path.Combine(Request.MapPath("~/Upload"), Path.GetFileName(file.FileName));

            try

            {

                return Content("上传异常 ！", "text/plain");

                //file.SaveAs(fileName);

                ////tm.AttachmentPath = fileName;//得到全部model信息

                //tm.AttachmentPath = "../upload/" + Path.GetFileName(file.FileName);

                ////return Content("上传成功！", "text/plain");

                //return RedirectToAction("Show", tm);

            }

            catch

            {

                return Content("上传异常 ！", "text/plain");

            }

其他相关

http://www.cnblogs.com/zhouhb/p/3906714.html

http://www.cnblogs.com/zhangxiaolei521/p/5985790.html