多个 javascript 个上传按钮只将内容放在一个
Multiple javascript upload buttons only putting content in one
我正在尝试制作两个上传按钮。一个是帐户徽标。
.col-sm-6
.wrapper
Account Logo
#account_logo
= image_tag @account.logo.url, :class => 'account_logo'
= file_field_tag 'account[logo]', :accept => 'image/png,image/jpeg'
%a.btn.btn-default{:href => '#'} Choose file
%span.notice
Only PNG or JPG please.
另一个用于电子邮件徽标。
.col-sm-6
.wrapper
Email Logo
#email_logo
= image_tag @account.email_logo.url, :class => 'email_logo'
= file_field_tag 'account[email_logo]', :accept => 'image/png,image/jpeg'
%a.btn.btn-default{:href => '#'} Choose file
%span.notice
Only PNG or JPG please.
我添加了 javascript,所以它对两者都适用。但是,发生了一些非常错误的事情。我已经添加了尝试和调试警报,他们告诉我即使我单击 #account_logo 按钮,它也会进入 #email_logo。可以请一些 javascript 向导帮助我吗?
:javascript
var logo = ["#account_logo", "#email_logo"];
for (var i = 0; i < logo.length; i++) {
var on_change = (logo[i] + ' input[type=file]');
var on_click = (logo[i] + ' a.btn');
var logo_img = (logo[i] + ' img');
$(document).on('click', on_click , function() {
alert("it is now " + on_click);
$(on_change).click();
alert("it is now " + on_change);
});
$(document).on('change', on_change, function() {
alert("it is now " + on_change);
var filelist = $(this).get(0).files;
var reader = new FileReader();
reader.onload = function (e) {
var url = e.target.result;
alert("it is now " + logo_img);
$(logo_img).attr('src', url);
}
reader.readAsDataURL(filelist[0]);
});
}
编辑:
啊哈,@Frost 发现了问题 - 变量范围。我自己会使用迭代器,但在这里错过了作用域对事件绑定的影响。
鉴于您已经在使用 jQuery,并且浏览器兼容性可能比 forEach
提供的更好,我强烈建议您使用 jQuery.each
功能。您也可以内联徽标数组,并直接传递点击事件,给出:
$(["#account_logo", "#email_logo"]).each(function(logo) {
$(logo + " input[type=file]").on("click", $(logo + " a.btn").click);
// etc.
});
原回复:
代码很多,问题描述不多。您是说事件处理程序都应用于 #email_logo
,还是两个按钮都执行 #email_logo
所需的操作?之前没有上传过文件,但是快速回顾了一下,逻辑没问题。
如果您使用 console.log
而不是 alert
并在此处粘贴结果以及日志生成方式的描述,会更容易看到问题。
我更愿意对此发表评论,但我没有足够的声誉。
可能是因为您使用的是 for(var i = ...) {}
循环结构而不是 logo.forEach(function(element) { ... })
。
可能发生这种情况的原因是因为 JavaScript 没有块作用域而是函数作用域,这意味着您的循环变量 i
在整个函数中可用,而您的 .on('change', ...)
处理程序会将此 i
称为变量,而不是注册处理程序时该变量所具有的任何值。
尝试使用 logo.forEach(function(element) { ... }
构造,而不是设置 var on_change = (logo[i] + 'input[type=file]');
,而是 var on_change = (element + 'input[type=file]');
.
我正在尝试制作两个上传按钮。一个是帐户徽标。
.col-sm-6
.wrapper
Account Logo
#account_logo
= image_tag @account.logo.url, :class => 'account_logo'
= file_field_tag 'account[logo]', :accept => 'image/png,image/jpeg'
%a.btn.btn-default{:href => '#'} Choose file
%span.notice
Only PNG or JPG please.
另一个用于电子邮件徽标。
.col-sm-6
.wrapper
Email Logo
#email_logo
= image_tag @account.email_logo.url, :class => 'email_logo'
= file_field_tag 'account[email_logo]', :accept => 'image/png,image/jpeg'
%a.btn.btn-default{:href => '#'} Choose file
%span.notice
Only PNG or JPG please.
我添加了 javascript,所以它对两者都适用。但是,发生了一些非常错误的事情。我已经添加了尝试和调试警报,他们告诉我即使我单击 #account_logo 按钮,它也会进入 #email_logo。可以请一些 javascript 向导帮助我吗?
:javascript
var logo = ["#account_logo", "#email_logo"];
for (var i = 0; i < logo.length; i++) {
var on_change = (logo[i] + ' input[type=file]');
var on_click = (logo[i] + ' a.btn');
var logo_img = (logo[i] + ' img');
$(document).on('click', on_click , function() {
alert("it is now " + on_click);
$(on_change).click();
alert("it is now " + on_change);
});
$(document).on('change', on_change, function() {
alert("it is now " + on_change);
var filelist = $(this).get(0).files;
var reader = new FileReader();
reader.onload = function (e) {
var url = e.target.result;
alert("it is now " + logo_img);
$(logo_img).attr('src', url);
}
reader.readAsDataURL(filelist[0]);
});
}
编辑:
啊哈,@Frost 发现了问题 - 变量范围。我自己会使用迭代器,但在这里错过了作用域对事件绑定的影响。
鉴于您已经在使用 jQuery,并且浏览器兼容性可能比 forEach
提供的更好,我强烈建议您使用 jQuery.each
功能。您也可以内联徽标数组,并直接传递点击事件,给出:
$(["#account_logo", "#email_logo"]).each(function(logo) {
$(logo + " input[type=file]").on("click", $(logo + " a.btn").click);
// etc.
});
原回复:
代码很多,问题描述不多。您是说事件处理程序都应用于 #email_logo
,还是两个按钮都执行 #email_logo
所需的操作?之前没有上传过文件,但是快速回顾了一下,逻辑没问题。
如果您使用 console.log
而不是 alert
并在此处粘贴结果以及日志生成方式的描述,会更容易看到问题。
我更愿意对此发表评论,但我没有足够的声誉。
可能是因为您使用的是 for(var i = ...) {}
循环结构而不是 logo.forEach(function(element) { ... })
。
可能发生这种情况的原因是因为 JavaScript 没有块作用域而是函数作用域,这意味着您的循环变量 i
在整个函数中可用,而您的 .on('change', ...)
处理程序会将此 i
称为变量,而不是注册处理程序时该变量所具有的任何值。
尝试使用 logo.forEach(function(element) { ... }
构造,而不是设置 var on_change = (logo[i] + 'input[type=file]');
,而是 var on_change = (element + 'input[type=file]');
.