多个 javascript 上传按钮仅将内容放在一个中答案

【问题标题】：Multiple javascript upload buttons only putting content in one多个 javascript 上传按钮仅将内容放在一个中
【发布时间】：2016-03-16 01:56:07
【问题描述】：

我正在尝试制作两个上传按钮。一个用于帐户徽标。

          .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]);
                  });
                }

【问题讨论】：

我怀疑代码“reader.readAsDataURL(filelist[0]);”位于您的 javascript 程序末尾的第三行。

标签： javascript upload haml image-uploading imagebutton

【解决方案1】：

这可能是因为您使用的是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]');。

【讨论】：

谢谢！范围问题是问题。我将所有logo[i] 更改为element 并将我的for 循环更改为logo.forEach(function(element) 并且它可以工作。
因为我假设你的后端是 ruby 的（因为 haml 标签），也许我还应该提一下，ruby 中的 for 构造也 not 引入了一个新的作用域，非常类似于 javascript 中的 for 构造，因此 for 循环实际上也会导致 ruby 中的“有趣”问题。

【解决方案2】：

编辑：

啊哈，@Frost 发现了问题 - 变量范围。我自己会使用迭代器，但在这里错过了作用域对事件绑定的影响。

鉴于您已经在使用 jQuery，并且可能比forEach 提供的浏览器兼容性更好，我强烈建议您使用jQuery.each 函数。你也可以内联 logos 数组，也可以直接传递 click 事件，给出：

$(["#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 会更容易发现问题，并将结果粘贴到此处，并附上日志生成方式的说明。

我更愿意对此发表评论，但我没有足够的声誉。

【讨论】：