jQuery-File-Upload rails ajax答案

【问题标题】：jQuery-File-Upload rails ajaxjQuery-File-Upload rails ajax
【发布时间】：2014-08-26 15:50:06
【问题描述】：

我在我的 rails 项目中使用 Turbolinks。当我单击上传按钮（ajax 调用）时，它失败并且错误部分显示 Uncaught TypeError: Cannot read property 'length' of undefined。我认为由于 turbolinks 在后台使用 ajax 导致的常规链接（无 ajax）显示了相同的问题。

我的上传页面的javascript：

<html>
..... html code ...

<%= javascript_include_tag 'js/vendor/jquery.ui.widget.js' %>
<%= javascript_include_tag "js/jquery.iframe-transport" %>
<%= javascript_include_tag "js/jquery.fileupload.js" %>

<script>
$(function () {
    'use strict';
    var filestoupload = 0;
    $('#fileupload').fileupload({
        dataType: 'json',
         add: function(e, data) {
                if(data.files[0]['size'] > 20000000) {
                   $('#errors_append').html('maximum size for file allowed is 20 mb');
                } else {
                    data.submit();
                }
        },
        done: function (e, data) {
            $.each(data.result.files, function (index, file) {
                filestoupload++;
                $('').text(file.name + ' ' + 'uploaded successfully').appendTo('#files_append');

                if (filestoupload > 2) {
                  $('#file_button').attr("disabled","disabled");
                }
            });
            $("#btn_text").html('Add more files');
        },
        start: function (e, data) {
            $('#progress .progress-bar').css(
                'width',
                0 + '%'
                );   
        },
        progressall: function (e, data) {
            var progress = parseInt(data.loaded / data.total * 100, 10);
            $('#progress .progress-bar').css(
                'width',
                progress + '%'
                );
        },
        success: function(xhr){
          $('#progress .progress-bar').attr('class', 'progress-bar progress-bar-success');
          $('#errors_append').empty();      
      },
      error: function(xhr){
          var errors = $.parseJSON(xhr.responseText).error
          $('#errors_append').html(errors);
          $('#progress .progress-bar').attr('class', 'progress-bar progress-bar-danger');        
      }
  }).prop('disabled', !$.support.fileInput)
.parent().addClass($.support.fileInput ? undefined : 'disabled');
});
</script>

【问题讨论】：

您的js/jquery.fileupload.js 文件在您的目录中的什么位置？以及你为什么在你的视图中使用 js？
在 /app/assets/javascripts/js/jquery.fileupload.js
您能否发布您在开发者控制台中遇到的确切错误
我已经添加了截图，但我没有足够的声誉点:(,
不，但是当我删除 turbolinks 时，它可以正常工作，或者当我在 application.js(require) 中包含 js 时，即使使用 turbolinks 也可以正常工作。但目前我不知道究竟是为什么。

标签： jquery ruby-on-rails ajax file-upload turbolinks

【解决方案1】：

我们让jquery-file-upload 与ajax here 合作（注册帐户然后尝试更新您的个人资料照片）。型号为Veronica Crespo:

Turbolinks

Turbolinks 的主要问题是它会阻止您的页面 JS 加载它所需的 DOM 元素。

因为 Turbolinks 只是刷新页面的 <body> 元素（而不是 <head>），所以 JS 仍然认为它处于“旧”状态，从而阻止它拾取任何新加载的元素。

通过 delegating 你的 JS 从常量元素（通常是 document）修复它，或者使用 Turbolinks event hooks 修复它：

var load = function() {
   ...
};

$(document).on("page:load ready", load);

修复

关于使用 Turbolinks，以下是我们在其中一个演示应用中用于 Avatar 功能的代码：

#app/assets/javascripts/application.js
$('#avatar').fileupload({

    url: '/profile/' + $(this).attr('data_id'),
    dataType: 'json',
    type: 'post',

    add: function (e, data) {
        //$(".items .avatar .avatar").prepend('<div class="loading" id="avatar_loading"><img src="<%= asset_path("profile/avatar_loading.gif") %>"></div>');
        //$('#avatar_loading').fadeIn('100');
        $(this).avatar_loading('avatar_loading');
        data.submit();
    },
    success: function (data, status) {;
        $("#avatar_img").fadeOut('fast', function() {
            $(this).attr("src", data.avatar_url).fadeIn('fast', function(){
                $(this).avatar_loading('avatar_loading');
            });
        });
    }

});

这符合jquery-fileupload gem：

#Gemfile
gem "jquery-fileupload-rails", "~> 0.4.1"

#app/assets/javascripts/application.js
//= require jquery-fileupload/basic

【讨论】：