RoR：在提交表單按鈕上上傳jquery文件

Question

如何做到這一點，以便我的提交按鈕可以上傳圖像？

<%= simple_form_for @project, html: { multipart: true, id: 'fileupload' } do |f| %>

  <span class="btn btn-success fileinput-button">
    <i class="glyphicon glyphicon-plus"></i>
    <span>Add files...</span>
    <input type="file" name="photos[]" id='photo_upload_btn', multiple>
  </span>
  <button type="submit" class="btn btn-primary start">
    <i class="glyphicon glyphicon-upload"></i>
    <span>Start upload</span>
  </button>
  <button type="reset" class="btn btn-warning cancel">
    <i class="glyphicon glyphicon-ban-circle"></i>
    <span>Cancel upload</span>
  </button>

  <%= f.button :submit, class: "btn btn-primary pull-right" %>
<% end %>


<script>
$(function () {

'use strict'; //not even sure what this is for

$('#fileupload').fileupload({

});
    // Load existing files:
    $('#fileupload').addClass('fileupload-processing');
    $.ajax({
        url: $('#fileupload').fileupload('option', 'url'),
        dataType: 'json',
        context: $('#fileupload')[0]
    }).always(function () {
        $(this).removeClass('fileupload-processing');
    }).done(function (result) {
        $(this).fileupload('option', 'done')
            .call(this, $.Event('done'), {result: result});
    });
});
</script>

現在，當我上傳圖片時，它將顯示縮略圖預覽和帶有取消按鈕的開始按鈕。 我想移動開始按鈕，並使用提交按鈕將其全部上傳。

Answer 1

請嘗試以下示例-

$('#fileupload').fileupload({
    dataType: 'json',
    add: function (e, data) {            
        $(".btn-primary").off('click').on('click', function () {
            data.submit();
        });
    },
});