Angularjs ngFileUpload添加新文件会覆盖最后一个文件

时间:2017-01-27 16:19:33

标签: angularjs

所以我正在尝试使用ng-file-upload。我设置上传多个文件,但每次我点击“上传文件”按钮或“拖放”文件(我在页面上有两个选项),它似乎用新的文件覆盖我以前的文件我选择。有人可以帮我修改代码,让我可以点击两次按钮添加到同一个列表中吗?

小提琴:http://jsfiddle.net/ptf5z9e5/2/

控制器:

 $scope.files = []
        $scope.uploadFiles = function (files) {
          $scope.files = files;
          if (files && files.length) {
            for (var i = 0; i < files.length; i++) {
             var file = files[i];
             if (!file.$error) {
              Upload.upload({
                  url: 'https://angular-file-upload-cors-srv.appspot.com/upload',
                  data: {
                      files: file
                  }
              }).then(function (response) {
                  $timeout(function () {
                      $scope.result = response.data;
                  });
              }, function (response) {
                  if (response.status > 0) {
                      $scope.errorMsg = response.status + ': ' + response.data;
                  }
              }, function (evt) {
                  $scope.progress =
                      Math.min(100, parseInt(100.0 * evt.loaded / evt.total));
              });
            }
          }
        }
      };

HTML:

<div class="modal-content">
        <div class="modal-header">
          <span id="span" class="close" style="z-index: 99999;">&times;</span>
          <!-- <div class="circle close" ></div> -->

          <p id="uploadText">Upload Files</p>
          <hr class="add-horizontal-line">
        </div>
        <div class="modal-body">
          <ul>
            <li ng-repeat="f in files" style="font:smaller" class="file-list"><p id="filesetup"></p>
              <!-- file image -->
              <div ng-if="vm.checkJPGFile(f.name) == 'jpg'">
                <img src="app/assets/img/jepfimg.png" style="width: 28px; height: 33px; position: relative; left: 20px;" alt="" />
              </div>
              <div ng-if="vm.checkPNGFile(f.name) == 'png'">
                <img src="app/assets/img/pngimg.png" style="width: 28px; height: 33px; position: relative; left: 20px;" alt="" />
              </div>
              <div ng-if="vm.checkPDFFile(f.name) == 'png'">
                <img src="app/assets/img/pdfimg.png" style="width: 28px; height: 33px; position: relative; left: 20px;" alt="" />
              </div>
              <!-- filename -->
              <div class="loadershow">{{f.name}} {{errFile.name}} {{errFile.$error}} {{errFile.$errorParam}}
              <!-- loading message and progress bar -->
              <br>
              <span class="progress" ng-show="progress >= 0">
                  <div style="width:{{progress}}%" ng-bind="progress + '%'"></div>
              </span>

              <p style="margin-left: 2px;font-style: italics;font-family: 'Roboto', sans-serif; font-size: 12px;color: #818A8F;" ng-bind="'(' + progress + '%' + ' ' + 'complete)'"></p>
              <!-- end of loading animation -->
              <!-- <div class="input-field col s6 m6 l6">
                <input placeholder="Note" id="first_name" type="text" class="validate active square-box">
                <label for="first_name" class="active">Description</label>
              </div> -->
            </li>
            <li ng-repeat="f in errFiles" style="font:smaller">{{f.name}} {{f.$error}} {{f.$errorParam}}</li>
          </ul>
          <div ngf-drop ngf-select ng-model="files" class="drop-box"
              ngf-drag-over-class="'dragover'" ngf-multiple="true" ngf-allow-dir="true"
              accept="image/*,application/pdf" ngf-select="uploadFiles($files)"
              ngf-pattern="'image/*,application/pdf'"><img src="app/assets/img/cloud-computing.png" id="cloud" alt="" />Drag and drop files here to upload</div>
          <div ngf-no-file-drop>File Drag/Drop is not supported for this browser</div>
          <div id="moveStuff">
            <p class="clickup">
              -or click here to upload-
            </p>
            <div class="buttn" ngf-select="uploadFiles($files)" multiple accept="image/*">upload file</div>
          </div>
        </div>
      </div>

0 个答案:

没有答案