Javascript jQuery文件上传程序和TurboLink在heroku上不起作用，我已经尝试了我能找到的所有修复方法

我花了几个小时试图解决这个问题。我使用Heroku指南在Rails中直接上传S3。我能够让它在我的定制版本中工作。在本地设置中效果很好，但在Heroku上不起作用。我已经把它缩小为一个JS问题，因为进度条不想加载。JS使上传在开始上传之前取决于文件的创建。我的JS技能糟透了（我一直在努力，因为我不得不这么做，但我对JS恨之入骨，这不适合我）

application.js：

//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require jquery-table
//= require js/stellar
//= require js/nivo-lightbox.min
//= require js/custom
//= require js/css3-animate-it
//= require gritter
//= require turbolinks
//= require jquery-fileupload/basic
// = require_tree .

为了让它在测试中工作，我必须将脚本放入表单本身

_form.html.erb

<div class="row">
  <div class="col-md-10 col-md-offset-1 text-center inner">

    <%= form_for(@repair, html: { class: "directUpload", data: { 'form-data' => (@s3_direct_post.fields), 'url' => @s3_direct_post.url, 'host' => URI.parse(@s3_direct_post.url).host } }) do |f| %>
      <% if @repair.errors.any? %>
        <div id="error_explanation">
          <h2><%= pluralize(@repair.errors.count, "error") %> prohibited this repair from being saved:</h2>

          <ul>
          <% @repair.errors.full_messages.each do |message| %>
            <li><%= message %></li>
          <% end %>
          </ul>
        </div>
      <% end %>

        <div class="field h3">
          <%= current_user.email %>
        </div>
        <div class="field h3">
          <%= f.label 'PPE Serial #' %>
          <%= f.collection_select :ppe_id, current_user.ppes, :id, :serial %>
        </div>
        <div class="field h4">
          <%= "Entered On: #{Date.today}" %><br />
        </div>
        <div class="field h4" id="photoUploader" >
          <%= f.fields_for :photos, @repair.photos.build do |photos_fields| %>
          <%= photos_fields.label :file_url, 'Upload a Photo' %>
          <%= photos_fields.file_field :file_url %>
          <% end %>
          <div class='progress' id='pgbar'></div>
        </div>
        <div class="field h4">
          <%= f.label :notes, 'Please give a detailed description of repairs needed.' %><br />
          <%= f.text_area :notes, class: 'note_area' %>
        </div>


        <div class="actions">
        <%= f.submit 'Save Record', class: 'btn btn-brand' %>
        </div>

        <script>
            $(window).on('turbolinks:load', function() {
                $('.directUpload').find("input:file").each(function(i, elem) {
                    var fileInput    = $(elem);
                    var form         = $(fileInput.parents('form:first'));
                    var submitButton = form.find('input[type="submit"]');
                    var progressBar  = $("<div class='bar'></div>");
                    var barContainer = $("<div class='progress' id='pgbar'></div>").append(progressBar);
                    $('#pgbar').remove();
                    fileInput.after(barContainer);
                    fileInput.fileupload({
                        fileInput:       fileInput,
                        url:             form.data('url'),
                        type:            'POST',
                        autoUpload:       true,
                        formData:         form.data('form-data'),
                        paramName:        'file', // S3 does not like nested name fields i.e. name="user[avatar_url]"
                        dataType:         'XML',  // S3 returns XML if success_action_status is set to 201
                        replaceFileInput: false,
                        progressall: function (e, data) {
                            var progress = parseInt(data.loaded / data.total * 100, 10);
                            progressBar.css('width', progress + '%')
                        },
                        start: function (e) {
                            submitButton.prop('disabled', true);

                            progressBar.
                            css('background', 'green').
                            css('display', 'block').
                            css('width', '0%').
                            text("Loading...");
                        },
                        done: function(e, data) {
                            submitButton.prop('disabled', false);
                            progressBar.text("Uploading done");

                            // extract key and generate URL from response
                            var key   = $(data.jqXHR.responseXML).find("Key").text();
                            var url   = '//' + form.data('host') + '/' + key;

                            // create hidden field
                            var input = $("<input />", { type:'hidden', name: fileInput.attr('name'), value: url })
                            form.append(input);
                        },
                        fail: function(e, data) {
                            submitButton.prop('disabled', false);

                            progressBar.
                            css("background", "red").
                            text("Failed");
                        }
                    });
                });
            });
        </script>

      <% end %>
  </div>
</div>

我已经预编译了资源，我已经禁用了此表单的TurboLink，禁用了此页面的TurboLink，禁用了整个应用程序的TurboLink，移动了appapplication.js require列表中文件的顺序

我希望我能更好地理解JS，从而调整上传脚本，使其不依赖于加载所依赖的内容

我在JS控制台中没有收到任何错误。它只是加载或不加载，这取决于环境

非常感谢您的帮助

---

JS上有一个关于进度条的注释。在我的测试工作版本中，turbolinks将在重新加载时继续为条创建容器div。所以创建了空条，但它们根本不会干扰脚本。因此，我创建了div，然后添加了一个删除它的调用，这样，如果它已经存在，它将在重新加载时被新的替换。

我终于能够解决这个问题。问题不在于页面上传脚本中的JS代码，而在于Heroku拒绝包含jQuery上传程序代码，不管我怎么做。就像我说的，在制作上效果很好，但在Heroku上一点也不好。我将

jQuery upload/basic JS

加载到我的Heroku安装中时，将jQuery upload gem中的三个文件复制到我的/public文件夹中，然后将其添加到我的资产初始化器文件中：

/config/initializers/assets.rb：

... #added code:
Rails.application.config.assets.precompile += %w( jquery-fileupload/basic-plus.js )

不知道为什么，不管我做了什么，JS代码都可以毫无问题地加载

---

现在，当Heroku启动时，它会将JS加载到我的application.JS文件中。一切都很顺利。我想知道宝石上是否有瑕疵

我最初的想法是，turbolinks不会加载脚本“on turbolinks load”，除非您直接在turbolinks load页面上（因此您不能从另一个页面单击该页面）。否则，'.directUpload'还不在页面上，因此它没有绑定。这是有道理的，因为当你把它直接放在页面上时，它就工作了——这意味着每次页面加载时它都会加载。无论你在测试版本中如何处理它，它都工作得非常完美。我知道有东西没装。我可以点击它的8种方式，以周日在测试中，作品完美每一次。到目前为止，Heroku还没有收到任何效果。正如我上面提到的，我尝试过在不同的地方使用代码，并尝试过多次代码和turbo链接的迭代（就像50个不同的组合），但都没有成功。我正在寻找一个人，也许可以为这个脚本权衡一个更好的结构，因为我认为它与它的制作方式有关。

... #added code:
Rails.application.config.assets.precompile += %w( jquery-fileupload/basic-plus.js )