图片上传

来源:互联网 发布:无间道 无间风云 知乎 编辑:程序博客网 时间:2024/06/06 16:26
基于Angularjs实现图片上传和下载

  根据ng-file-uoload实现文件上传和下载实现

  网上down下来ng-file-uoload.js,在项目中记得引入服务哦。

  示例代码:

        

    FileUploaderCtrl.$inject = ["$scope","$FileUploader"];
      function FileUploaderCtrl($scope,$FileUploader) {
        var uploader = $scope.uploader = new $FileUploader({
          url: '/file/upload.do'
        });
      // FILTERS
      uploader.filters.push({
      name: 'customFilter',
      fn: function (item /*{File|FileLikeObject}*/, options) {
        return this.queue.length < 10;
      }
      });
    // CALLBACKS

    uploader.onWhenAddingFileFailed = function (item /*{File|FileLikeObject}*/, filter, options) {
      console.info('onWhenAddingFileFailed', item, filter, options);
    };
    uploader.onAfterAddingFile = function (fileItem) {
      console.info('onAfterAddingFile', fileItem);
    };
    uploader.onAfterAddingAll = function (addedFileItems) {
      console.info('onAfterAddingAll', addedFileItems);
    };
    uploader.onBeforeUploadItem = function (item) {
      console.info('onBeforeUploadItem', item);
    };
    uploader.onProgressItem = function (fileItem, progress) {
      console.info('onProgressItem', fileItem, progress);
    };
    uploader.onProgressAll = function (progress) {
      console.info('onProgressAll', progress);
    };
    uploader.onSuccessItem = function (fileItem, response, status, headers) { //上传成功
      console.info('onSuccessItem', fileItem, response, status, headers);
    };
    uploader.onErrorItem = function (fileItem, response, status, headers) {
      console.info('onErrorItem', fileItem, response, status, headers);
    };
    uploader.onCancelItem = function (fileItem, response, status, headers) {
      console.info('onCancelItem', fileItem, response, status, headers);
    };
    uploader.onCompleteItem = function (fileItem, response, status, headers) { //上传成功
      console.info('onCompleteItem', fileItem, response, status, headers);
    };
    uploader.onCompleteAll = function () {
      console.info('onCompleteAll');
    };

      console.info('uploader', uploader);
    };
    /*
    * uploader.onSuccessItem
    * uploader.onCompleteItem
    * 根据这两个函数即可获取到相应的返回状态
    * 
    */

    Html中也要有相应的更改:

      <input type="file" name="****" value="****" nv-file-select="" uploader="uploader"/>

    ps:有需要js文件的可以联系我

    实际开发代码 : 

    var uploader2 = $scope.uploader2 = new FileUploader({
      url:$scope.$serverPath+'BatchFileUpload.do'
    });

    uploader2.onAfterAddingFile = function(fileItem) {
      $scope.fileName = fileItem.file.name;
      if($scope.uploader2.queue&&$scope.uploader2.queue.length>1){
        for(var i=0;i<$scope.uploader2.queue.length-1;i++){
          $scope.uploader2.queue[i].remove();
        }
      }
    };

    

    //文件上传
    $scope.submitPre1 = function () {
      if (!parseFloat($scope.totalAmount)>0) {
        $scope.alert("转账金额不能为0!");
        return false;
      }
    $scope.uploader2.onBeforeUploadItem= function(item){
      item.alias='UploadFile';

      item.formData = [{"FileName":FileName}
          ]
     }
    };
    uploader2.onSuccessItem = function(fileItem, response, status, headers) {
      if(response.jsonError) {
        $scope.confirm(response.jsonError[0]["_exceptionMessage"],function(){$state.reload()},function(){$state.reload()});
      } else {
        $scope.queryList();
      }
    };
    var length = $scope.uploader2.queue.length;
    var a = $scope.uploader2.queue[length-1];
    if(a){
      a.upload();
    }else{
      $scope.alert("请选择文件")
    }

  };

原创粉丝点击