Question

在某些实体编辑页面上有一个图像管理部分 - 通过blueimp jQuery文件上传器+角度插件实现图像管理。

我无法将图像管理放在表单中，因为不允许嵌套表单。使用示例中的代码：

.form-group{'data-ng-app' =>'demo', 'data-ng-controller' => 'DemoFileUploadController', 'data-file-upload' => 'options', 'ng-init' => "options.url='#{add_image_promotion_path(@promotion)}'", 'data-ng-class' => "{'fileupload-processing': processing() || loadingFiles}"}
  .col-sm-6
    .fileupload-buttonbar
      %span.btn.btn-success.fileinput-button
        %i.glyphicon.glyphicon-plus
        %span Add image...
        %input{type: :file, multiple: 'multiple', name: 'image'}/
      %button.btn.btn-primary.start{type: :submit, 'data-ng-click' => 'submit()'}
        %i.glyphicon.glyphicon-upload
        %span Start upload
      %button.btn.btn-warning.cancel{type: :reset, 'data-ng-click' =>'cancel()'}
        %i.glyphicon.glyphicon-ban-circle
        %span Cancel upload
      %span.fileupload-process

http://blueimp.github.io/jQuery-File-Upload/angularjs.html

控制器和一切就像在示例中，唯一的区别是我使用div而不是形式。

问题出在我添加文件和点击上传之后 - 整个表单提交发生，但我只需要文件上传。请指教。

Answer 1

当您选择file时，每个文件都堆叠在queue数组中。您可以从file获取queue并在file.$submit()中执行ng-click。

以下是仅上传last picked文件

的示例

  %button.btn.btn-primary.start{type: :button, 'data-ng-click' => 'queue[queue.length - 1].$submit()'}
    %i.glyphicon.glyphicon-upload
    %span Start upload
  %button.btn.btn-warning.cancel{type: :reset, 'data-ng-click' =>'queue[queue.length - 1].$cancel()'}
    %i.glyphicon.glyphicon-ban-circle
    %span Cancel upload

Blueimp jquery文件上传与角度提交所有表单，但不仅仅是文件

1 个答案: