ng-file-upload用法（前端部分）

最新推荐文章于 2024-08-13 08:19:34 发布

加鸡腿

最新推荐文章于 2024-08-13 08:19:34 发布

阅读量814

点赞数

分类专栏： angular 文章标签： ng-file-upload 上传文件

本文链接：https://blog.csdn.net/qq_43437571/article/details/105246938

版权

angular 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

项目需要做一个导入功能，记录一下。

一、引入两个文件：
ng-file-upload.min.js ng-file-upload-shim.min.js

二、注入：

angular.module('aaa'),[
	'ngFilrUpload'
]}

三、页面上：

<div>
   <a ng-click="import()">
       <i class="glyphion glyphino-save"></i>
   </a>
</div>

$scope.import = function() {
    _interbalCreateModal({
        scope:$scope,
        backdrop:'static', //点击背景的时候弹框不关闭
        template:'import.html', //点击按钮之后跳转的目标页面，即导入的页面
        show:true
    },$modal,$scope);
}

四、导入的页面，也就是导入的弹框：

.import-modal {
    height: 150px;
    margin: 0 20% 0 20%;
    text-align: center;
}
.import-modal p {
    position: absolute; /* 这里的定位的top和left值，自己按照实际情况调整 */
    top: 20px; 
    left: 30px;
    color: #131d2b;
}
.impory-drop {
    position: absolute;
    width: 300px;
    height: 80px;
    background-color: #f8f8f8;
    border: 5px dashed #ddd;
    margin: 20px 0 20px 0;
    opacity: 0.7
}

<div class="import-modal">
	<!-- 选择导入框 -->
    <input type="file" ng-select ngf-change="upload($files)">
    <!-- 拖拽框 -->
    <p>拖拽一个文件</p>
    <div class="import-drop">
        ngf-drop 
        ngf-change="upload($files)"
    </div>
</div>
<!-- 报错信息 -->
<div ng-if="errorMessage"> 
  	<div>处理时出错<span>:</span>{{errorMessage}}</div>
</div>

// 因为我不使用进度条的效果，而是使用一个遮罩，所以用到loading
$scope.loading = false; //遮罩不显示
$scope.upload = function($files) {
    var file = $files[0];
    if (file) {
        $scope.loading = true; //遮罩显示，数据比较多时表示正在处理
        Upload.upload({
            url: xxxxxxx,
            method: 'POST',
            file: file
        }).success(function(data){
            $scope.loading = false;  //遮罩消失，表示数据成功处理完毕
            $scope.load();  // 重新刷新页面的事件，自己的是什么就换一下
            $scope.hide();
        }).error(function(data){
            if (data && data.message) {
                $scope.errorMessage = data.message;
            }
            $scope.loading = false;  //遮罩消失，表示数据处理失败完毕
        })
        // .progress(function(evt) {
        //     $scope.uploading = parseInt(100.0 * evt.loaded / evt.total);
        // })因为我不使用进度条，所以把它注掉了
    }
}