多个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]);
});
}
这可能是因为您使用的是 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]');
。
编辑:
啊哈,@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
,并将结果粘贴到此处,并附上日志生成方式的说明,则会更容易看到问题。
我更愿意对此发表评论,但我没有足够的声誉。
- 我应该如何从xml文件构建一个javascript页面
- 有没有一个javascript图形绘制库可以进行气球树布局
- 如何将一个JavaScript函数回调为多个函数
- 代码背后调用一个JavaScript函数的按钮点击-C#
- 多次调用另一个javascript函数中的javascript函数
- HTML外部javascript加载另一个javascript
- 在一个javascript文件中为整个网站创建标签
- 在任何AJAX调用之前触发一个javascript函数
- 如何用另一个Javascript更改Javascript函数值
- 动态创建一个javascript/jquery多级数组
- 将变量值从一个javascript传递到另一个javascript
- 获取一个javascript对象attr's
- 是一个javascript bookmarklet,可以设置破坏跨域安全的域cookie
- PNG图像被覆盖,但每个图像都有一个链接可以更改,每次一个-Javascript/jQuery/CSS
- 添加一个javascript函数来下载elfinder上的事件
- 有没有一个Javascript代码可以看到你的缓存有多满
- 使用jenkins从不同文件夹中的文件构建一个javascript文件
- 是否有一个javascript库来解析简单的查询
- 一个javascript实现base64图像编码并将结果写入文本文件
- 使用一个Javascript函数提交多个表单可以在FF中工作,而不需要其他浏览器