多個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上傳按鈕只把內容放在一個

回答

相關問題