Question

我的应用程序使用Angular文件上传组件。 https://github.com/danialfarid/angular-file-upload

它之前有效，但我似乎在重构过程中打破了它，我不知道如何解决它。

应用程序允许选择电子表格，但是当按下“导入”按钮时，它只会突出显示但不执行任何操作。执行 onFileSelect 功能，但永远不会调用 submitUpload 。调试器或控制台中没有任何内容。

有一部分内容包含电子表格上传组件。

<div class="row">
    <div class="col-md-8">
        <form name="uploadForm" reset-form="resetForm" ng-submit="selector.submitUpload()" ng-controller="DesignViewCtrl" enctype="multipart/form-data">
          <input type="file" name="spreadsheet" ng-file-select="onFileSelect($files)" />
          </div>
     <div class="col-md-2">
          <input type="submit" value="&nbsp;&nbsp;Import&nbsp;&nbsp;" class="btn btn-success" />
          <p ng-show="uploaded">Success! <a ng-href="/batches/{{batchID}}">Show batch</a></p>
        </form>
    </div>
</div>

控制器中的相关代码：

$scope.onFileSelect = function ($files) {
  return $scope.selector.file = $files[0];
};

$scope.selector.submitUpload = function () {
  console.log('submit upload2');
  return $scope.upload = $upload.upload({
    url: '/api/batches/spreadsheet_upload.json',
    file: $scope.selector.file
  }).success(function (data, status, headers, config) {
    console.log(JSON.stringify(data.data[0],null,' '))
    $scope.selector.tabledata.push(data.data[0]);
  });
};

Answer 1

我认为问题是由于您的列div分割表单导致您的DesignViewCtrl不是提交输入的父级。在模板中尝试以下更改：

<div class="row">
    <form name="uploadForm" reset-form="resetForm" ng-submit="selector.submitUpload()" ng-controller="DesignViewCtrl" enctype="multipart/form-data">
        <div class="col-md-8">
            <input type="file" name="spreadsheet" ng-file-select="onFileSelect($files)" />
        </div>
        <div class="col-md-2">
            <input type="submit" value="&nbsp;&nbsp;Import&nbsp;&nbsp;" class="btn btn-success" />
            <p ng-show="uploaded">Success! <a ng-href="/batches/{{batchID}}">Show batch</a></p>
        </div>
    </form>
</div>

此更改可确保您的form元素是两个列div的父级。

Answer 2

根据angular-file-upload的文档，您甚至不需要使用<form>，因此图书馆似乎为您做了这一部分。尝试删除表单，只需使用<div>作为控制器，然后使用<button>而不是<input type="button">作为导入按钮。

我怀疑发生的是当您点击＆＃34;输入按钮＆＃34;时未调用ng-submit事件。在angularjs中使用表单并尝试依赖表单提交行为时，我遇到了与此类似的奇怪问题。

实际上我只是再看一遍，我认为问题实际上是你将<form>标签拆分为两个元素（这是不正确的）。如果你在浏览器中呈现的没有部分，那么它可能会工作，但我怀疑它在部分内容并依赖AngularJS将其放入浏览器中将无法可靠地工作。

所以你可以尝试以下两种方法之一：

1）完全删除表格标签

<div class="row" ng-controller="DesignViewCtrl">
    <div class="col-md-8">
          <input type="file" name="spreadsheet" ng-file-select="onFileSelect($files)" />
    </div>
     <div class="col-md-2">
          <button class="btn btn-success" ng-click="selector.submitUpload()">&nbsp;&nbsp;Import&nbsp;&nbsp;</button>
          <p ng-show="uploaded">Success! <a ng-href="/batches/{{batchID}}">Show batch</a></p>
    </div>
</div>

2）保留表单标签，但要确保语法有效：

<form name="uploadForm" reset-form="resetForm" ng-submit="selector.submitUpload()" ng-controller="DesignViewCtrl" enctype="multipart/form-data">
  <div class="row">
    <div class="col-md-8">
      <input type="file" name="spreadsheet" ng-file-select="onFileSelect($files)" />
    </div>
    <div class="col-md-2">
      <input type="submit" value="&nbsp;&nbsp;Import&nbsp;&nbsp;" class="btn btn-success" />
      <p ng-show="uploaded">Success! <a ng-href="/batches/{{batchID}}">Show batch</a></p>
    </div>
  </div>
</form>

角度电子表格上传按钮无响应

2 个答案: