angular 上传文件的插件angular-file-upload

沙靖琪
2023-12-01
//html  包裹一层  a 标签  不软效果回事和原声js一样的
<div class="uploading form-group">
<input class="form-control" ng-model="fileItem.name" readonly/>
<a href="javascript:;" class="choose-book">
<input type="file" name="certificate" nv-file-select uploader="uploader" ng-click="clearItems()"/>
<span>浏览</span>
</a>
</div>
    //css
  > .uploading {
    margin-right: 0px;
    > input {
      width: 300px;
      height: 30px;
      line-height: 30px;
      float: left;
    }
    > a {
      width: 50px;
      text-align: center;
      height: 30px;
      line-height: 30px;
      position: relative;
      cursor: default;
      overflow: hidden;
      display: inline-block;
    }
    > a input {
      position: absolute;
      left:0;
      top: 0;
      opacity: 0;
    }
    > a span {
      display: inline-block;
      padding: 0px 5px;
      background-color: $light-orange;
      color: $gray-light;
    }
  }


//js代码
var uploader = $scope.uploader = new FileUploader({   //开始要声明一个uploaded对象
  url: '/seller/blackMember/upload',
queueLimit: 1,   //文件个数
removeAfterUpload: true,  //上传后删除文件,
formData: [  //http请求传的参数
{type: 0},
{memo: $scope.memo}
]
});
$scope.clearItems = function () {  //重新选择文件时,清空队列,达到覆盖文件的效果
uploader.clearQueue();
}
uploader.onAfterAddingFile = function (fileItem) {
  $scope.fileItem = fileItem._file;  //添加文件之后,把文件信息赋给scope
};
uploader.onSuccessItem = function (fileItem, response, status, headers) {
  if (response.rescortCode == 0) {
  $win.alert("上传成功" + response.resultMessage, $scope);
  $('#addBlackMember').modal('hide');
  var parentCtrl = $scope.$parent.$parent;
parentCtrl.getResultsPage(1);
} else {
    $win.alert(response.resultMessage, $scope);
  }
};
uploader.onErrorItem = function (fileItem, response, status, headers) {
  $win.alert("error:上传失败", $scope);
};
$scope.UploadFile = uploadFile;
function uploadFile(ele) {
  $scope.uploader.type = ele;
uploader.uploadAll();
}

//angular-file-upload.js    文件里的配置项
module.exports = {     //配置项
  url: "/",
alias: "file",
headers: {},
queue: [],
progress: 0,
autoUpload: false,
removeAfterUpload: false,
method: "POST",
filters: [],
formData: [],
queueLimit: Number.MAX_VALUE,
withCredentials: false
};


angular-file-upload插件可以到gitHub上进行下载  https://github.com/ZNN-She/angular-file-upload.git
 类似资料: