jQuery的，文件上传轨阿贾克斯文件上传、jQuery、轨阿贾克斯
我在我的轨道项目中使用Turbolinks。当我点击上传按钮（AJAX调用），失败和错误部分显示未捕获的类型错误：无法读取的未定义的属性长度。同样的问题与常规链接（不阿贾克斯），它是由turbolinks展示我想是因为turbolinks使用了Ajax在后台。
我的上传页面的JavaScript：
＆LT; HTML＆GT;
..... HTML code ...
＆LT;％= javascript_include_tag'JS /供应商/ jquery.ui.widget.js％＆GT;
＆LT;％= javascript_include_tagJS / jquery.iframe运输％＆GT;
＆LT;％= javascript_include_tagJS / jquery.fileupload.js％＆GT;
＆LT;脚本＆GT;
$（函数（）{
使用严格的;
变种filestoupload = 0;
$（'＃文件上传）。文件上传（{
数据类型：JSON，
地址：功能（即数据）{
如果（data.files [0] ['尺寸']≥20000000）{
$（'＃errors_append）HTML（选择文件允许的最大大小为20 MB'）;
} 其他 {
data.submit（）;
}
}，
完成：功能（即数据）{
$每个（data.result.files，功能（索引，文件）{
filestoupload ++;
$（''）。文本（file.name +''+'成功上传'）appendTo（'＃files_append）。
如果（filestoupload→2）{
$（'＃file_button）ATTR（已禁用，已禁用）。
}
}）;
$（＃btn_text）HTML（添加多个文件）。
}，
启动：功能（即数据）{
$（'＃进度.progress吧'）。CSS（
'宽度'，
0 +'％'
）;
}，
progressall：功能（即数据）{
变种进展= parseInt函数（data.loaded / data.total * 100，10）;
$（'＃进度.progress吧'）。CSS（
'宽度'，
进度+'％'
）;
}，
成功：函数（XHR）{
$（'＃进度.progress吧'）ATTR（类，进度条进度条 - 成功）;
$（'＃errors_append）空（）;
}，
错误：函数（XHR）{
VAR错误= $ .parseJSON（xhr.responseText）.error
$（'＃errors_append）HTML（错误）。
$（'＃进度.progress吧'）ATTR（类，进度条进度条 - 危险）;
}
}），支撑（禁用，！$。support.fileInput）
。.parent（）addClass（$ support.fileInput未定义：？已禁用）;
}）;
＆LT; / SCRIPT＆GT;
解决方案
我们得到了 jQuery的文件上传与合作 AJAX 这里（注册账号，然后尝试更新您的个人资料图）。型号是维罗尼卡克雷斯波：
-
Turbolinks
与Turbolinks的主要问题是，它会prevent您对网页JS从加载 DOM 元素它要求。
由于Turbolinks只是刷新了＆LT;身体GT;你的页面元素（不是＆LT; HEAD＆GT; ） ，JS仍然认为这是在老的状态，$ P $染上任何新加载的元素pventing它。
其固定或者 委托 您的JS从常量元素（通常文件），或使用的 Turbolinks事件挂钩解决它：
无功负荷=功能（）{
...
};
$（文件）。在（页：加载准备好了，负载）;
-
修正
在问候与Turbolinks工作，这里是我们在我们的演示应用程序之一用于头像功能code：
＃应用程序/资产/ JavaScript的/ application.js中
$（'＃阿凡达）。文件上传（{
网址：'/型材/+ $（本）.attr（'data_id），
数据类型：JSON，
类型：'后'，
地址：功能（即数据）{
//$(".items .avatar .avatar）prePEND（'＆LT; DIV CLASS =加载ID =avatar_loading＆GT;＆LT; IMG SRC =＆LT;％= asset_path（个人资料/ avatar_loading.gif）％＆GT;＆GT;＆LT; / DIV＆GT;'）;
//$('#avatar_loading').fadeIn('100'）;
$（本）.avatar_loading（'avatar_loading'）;
data.submit（）;
}，
成功：功能（数据，状态）{;
$（＃avatar_img）。淡出（'快'，函数（）{
$（本）.attr（src用户，data.avatar_url）.fadeIn（'快'，函数（）{
$（本）.avatar_loading（'avatar_loading'）;
}）;
}）;
}
}）;
这是与的jQuery文件上传行宝石：
#Gemfile
宝石的jQuery文件上传护栏，〜＆GT; 0.4.1
＃应用程序/资产/ JavaScript的/ application.js中
// =需要的jQuery文件上传/基本
I am using Turbolinks in my rails project . When I clicked upload button(ajax call),it fails and the error section is showing Uncaught TypeError: Cannot read property 'length' of undefined. The same problem is showing with regular link(no ajax) which is caused by turbolinks I think because turbolinks uses ajax in the background.
my upload page's 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>
解决方案
We got jquery-file-upload working with ajax here (sign up for account then try updating your profile pic). Model is Veronica Crespo:
--
Turbolinks
The main issue with Turbolinks is that it will prevent your on-page JS from loading the DOM elements it requires.
Because Turbolinks just refreshes the <body> element of your page (not the <head>), JS still thinks that it's in the "old" state, preventing it from picking up any of the newly-loaded elements.
Its fixed by either delegating your JS from a constant element (typically document), or by using the Turbolinks event hooks to fix it:
var load = function() {
...
};
$(document).on("page:load ready", load);
--
Fix
In regards to working with Turbolinks, here's the code we used for the Avatar functionality in one of our demo apps:
#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');
});
});
}
});
This is in line with the jquery-fileupload gem:
#Gemfile
gem "jquery-fileupload-rails", "~> 0.4.1"
#app/assets/javascripts/application.js
//= require jquery-fileupload/basic
