【问题标题】:How to retain visibly previous uploaded files using ng-file-upload when tried to upload again?尝试再次上传时,如何使用 ng-file-upload 保留以前上传的文件?
【发布时间】:2017-09-06 09:11:35
【问题描述】:

我已经实现了 ng-file-upload 指令来将我的文件上传到相应的 URL .....现在,当我选择一个文件时,根据 ng-file-upload 的功能,上传和选择同时发生。

但是,上传后,当我尝试再次上传某些其他文件时......以前上传的文件明显消失......我也想保留以前上传的文件,需要获取新上传的文件在这些之下...如何解决这个问题?

我的html

<form>
         <input type="text" class="browse-form"placeholder="   Click browse to load documents " required>
         <button ngf-select="vm.uploadFiles($files)" multiple accept=".csv,.pdf,.doc,.docx,.xlsx" class="btn btn-info btn-md">Browse</button>
        </form>
        <p style="margin-top: -30px;"> Note:Supported file formats are word,excel and pdf only</p>
        <table class="table table-fixed">
         <thead class="table-header"><tr>
         <th class="col-xs-6">DOCUMENT NAME</th>
         <th class="col-xs-1">SIZE</th>
         <th class="col-xs-1">VERSION</th>
         <th class="col-xs-2">DATE UPLOADED</th>
         <th class="col-xs-2">UPLOADED BY</th>
         <th class="col-xs-1">ACTION</th></tr>
         </thead>
         <tbody>
         <tr ng-repeat="uploading in vm.files track by $index" style="font:smaller">
         <td>{{uploading.name}}</td>

我的控制器.js

 vm.uploadFiles = function(files){
 vm.files = files;
 angular.forEach(files,function(file){
  file.upload = Upload.upload({
      url:' ', 
      data:{file:file}
  });

  file.upload.then(function(response){
      $timeout(function(){
          file.result = response.data;
      });
      },

  function (response) {
      if (response.status > 0)
          vm.errorMsg = response.status + ': ' + response.data;
  },

  function (evt) {
      file.progress = Math.min(100, parseInt(100.0 * evt.loaded / evt.total));
  });});

【问题讨论】:

    标签: javascript angularjs file-upload upload ng-file-upload


    【解决方案1】:

    为什么不创建一个数组并在每次上传文件时推送给它

    vm.fileArr = []
    
    vm.uploadFiles = function(files) {
    
    
        vm.files = files;
    
        angular.forEach(files, function(file) {
    
            vm.fileArr.push(file)// show this array 
    
            file.upload = Upload.upload({
                url: ' ',
                data: {
                    file: file
                }
            });
            file.upload.then(function(response) {
                    $timeout(function() {
                        file.result = response.data;
                    });
                },
                function(response) {
                    if (response.status > 0)
                        vm.errorMsg = response.status + ': ' + response.data;
                },
                function(evt) {
                    file.progress = Math.min(100, parseInt(100.0 * evt.loaded / evt.total));
                });
        });
    }
    

    【讨论】:

    • 保留先前上传文件的逻辑在控制器中通过将其推送到数组来工作......但仍然显示为 HTML 未定义......我也在 foreach 循环中尝试过@sachila ranawaka跨度>
    • 你能创建一个演示吗
    • @HKI345 - 您可以发布适合您的解决方案的示例代码吗?我也面临类似的问题 - 保留以前上传的文件而不会消失。我也遇到了它们在成功上传时被删除的情况,并希望看到您的示例正常工作。谢谢
    • @SouthPlatte 上面的解决方案中提到了示例代码 js,您只需要将上传的文件推送到一个数组中,并使该数组显示在您的 HTML 代码中....您之前上传的如果您正在上传新文件,文件将存储在该数组中...逻辑位于数组中...抱歉回复晚了:)
    猜你喜欢
    相关资源
    最近更新 更多
    热门标签