加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

angular不支持file控件的双向绑定怎么破!

发布时间:2020-12-17 08:40:39 所属栏目:安全 来源:网络整理
导读:前端: form class="form-horizontal tasi-form" method="post" div class="modal-content" div class="modal-header" button type="button" class="close" ng-click="cancel()"×/button h4 class="modal-title"{{formTitle.title}}/h4 /div div class="mod

前端:

<form class="form-horizontal tasi-form" method="post">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" ng-click="cancel()">×</button>
<h4 class="modal-title">{{formTitle.title}}</h4>
</div>
<div class="modal-body">
<input type="file" id="file" name="file" class="btn btn-warning pull-left" ng-src={{files[0].name}} onchange='angular.element(this).scope().fileChanged(this)' />
</div>
<div class="modal-footer" style="display: block">
<button class="btn btn-primary" ng-click="updateTplConfirm()">确定</button>
<button class="btn btn-disabled" ng-click="cancel()">关闭</button>
</div>
</div>

</form>


控制器:

$scope.fileChanged = function (ele) {
$scope.files = ele.files;
$scope.$apply(); //传播Model的变化。
}

$scope.updateTplConfirm = function () {
//angular不支持file的ng-model双向绑定
var fd = new FormData();
var file = document.querySelector('input[type=file]').files[0];
var filename = $scope.files[0].name;
if (filename.length > 1 && filename)
{
var ldot = filename.lastIndexOf(".");
var type = filename.substring(ldot + 1);
if(type != "pdf") {
toastr.warning("只能上传PDF文件!");
}else{
TplConfigService.updateTpl({},file,function (data) {
if (data != null && data.state == 1) {
toastr.success("模板更新成功!");
$scope.cancel();
} else {
toastr.warning("模板更新失败!");
}
});
}
}
};


服务类:

//上传文件
uploadFile: function (url,par) {
var deferred = $q.defer();
Upload.upload({
//服务端接收
url: serviceBase + url,
//上传的同时带的参数
data: par,
file: file
}).progress(function (evt) {
//进度条
var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
$rootScope.progressPercentage = progressPercentage;
console.log('progess:' + progressPercentage + '%');
}).success(function (data,status,headers,config) {
//上传成功
deferred.resolve(data);
}).error(function (data,config) {
//上传失败
console.log('error status: ' + status + data);
});
return deferred.promise;
},

注入:

commonService.service('CommonService',['$rootScope', '$q','$timeout','$http', '$state','$uibModal','Settings','$window','$localStorageUsage','$loading','toastr','Upload',function ($rootScope,$q,$timeout,$http,$state,$uibModal,Settings,$window,$localStorageUsage,$loading,toastr,Upload) {


注意:'$q','$http' 是Upload的依赖模块。


C#后端:

/// <summary>
/// 更新模板
/// </summary>
/// <returns></returns>
[HttpPost]
[AllowAnonymous]
public MessageRs UpdateTpl() //注意不要加入参
{
HttpFileCollection files = HttpContext.Current.Request.Files;
return null;
}


界面:

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读