多个JavaScript上传按钮只把内容放在一个

我想要做两个上传按钮。一个是账户标识。多个JavaScript上传按钮只把内容放在一个

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

来源

2016-03-16 alexia

我怀疑代码“reader.readAsDataURL（filelist [0]）;”从你的JavaScript程序结束的第三行。 –

@ fumu7这是为什么？ – alexia

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

来源

2016-03-16 08:56:45 Frost

谢谢！问题的范围是问题。我把我所有的'logo [i]'都改成了'element'，并将我的for循环改成了'logo.forEach（function（element）'，它起作用。 – alexia

因为我假设你的后端是在ruby中（因为haml标签），也许我应该提到ruby中的'for'构造也不*引入一个新的作用域，非常像javascript中的'for'构造，所以'for'循环实际上可能导致ruby中的“有趣”问题。 – Frost

编辑：

啊哈，@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，并且在此粘贴结果以及如何生成日志，则会更容易看到问题。

我宁愿评论这一点，但我没有足够的声望。

来源

2016-03-16 08:15:40 ZimbiX

多个JavaScript上传按钮只把内容放在一个

回答

相关问题