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


posted on 2017-05-17 17:30  swarb  阅读(217)  评论(0编辑  收藏  举报