イメージをfirebaseストレージにアップロードし、ダウンロードURLを取得してimgタグで表示しても複数回表示されている場合

Question

イメージをfirebaseストレージにアップロードし、再度firebaseデータベースにURLパスを保存しています。しかし、初めてアップロードするときは1回だけ表示されますが、ギャラリーに再度アップロードして画像を選択すると2回表示されます。もう一度ギャラリーに行って、画像を3回表示している場合は、これを解決する方法を教えてください。 Firebase Googleのサポートエンジニア暗示1として

<img id="image5e" src="img/upload.png" /> 
<input type='file' style="display:none;" name="photosubmit" id="photosubmit"/> 

var app = { 
    initialize: function() { 
     app.bindEvents();  
    }, 
    bindEvents: function() { 
     document.addEventListener('deviceready', this.onDeviceReady, false); 
    }, 
    onDeviceReady: function() { 
     var uploadimg = document.getElementById("image5e"); 
     uploadimg.addEventListener("click",app.upload2gallery,false); 
    },   
    upload2gallery: function() { 
    $("#photosubmit").click(); 

    var filebutton = document.getElementById("photosubmit"); 
    filebutton.addEventListener('change', function(e) { 
     var file = e.target.files[0];  
     var storageRef = firebase.storage().ref('sweet_gift/' + file.name);  
     var task = storageRef.put(file); 

     task.on('state_changed', function progress(snapshot) { 
      var load = '<h1>Please Wait</h1>' + '<i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i><span>Loading ...</span>'; 
      $.mobile.loading('show', { 
       text: 'Please wait...', 
       textVisible: true, 
       html: load, 
       theme: 'z' 
      }); 
     }, function error(err) { 
     }, function complete() { 
      $.mobile.loading('hide'); 

      var uni = localStorage.getItem("lunicode"); 
      var ref = firebase.database().ref(uni); 
      var myname = storage.getItem("uname"); 
      var myid = storage.getItem("myid"); 
      var downloadURL = task.snapshot.downloadURL; 
      ref.push({ 
       name: myname, 
       imageurl: downloadURL, 
       photoUrl: "/images/profile_placeholder.png", 
       my_id: myid, 
      }); 
     }); 
    }); 
}, 

$(document).on('pagebeforeshow', '#chatpage', function() { 
    var uni = localStorage.getItem("lunicode"); 
    var ref = firebase.database().ref(uni); 

    $("#images6").empty(); 

    ref.orderByChild("messages").on("child_added", function(snapshot) { 
     $("#images6").append(movielist(snapshot.val())); 
     var last_li = $(".cmsg li:last-child").offset().top; 
     setTimeout(function() { 
      $.mobile.silentScroll(last_li); 
     }, 50); 
     ActivityIndicator.hide(); 
    }); 
}); 

$(document).on('pagebeforehide', '#chatpage', function() { 
    alert("going"); 
    var uni = localStorage.getItem("lunicode"); 
    var ref = firebase.database().ref(uni); 
    $("#images6").empty(); 
    //ActivityIndicator.show(); 
    ref.orderByChild("messages").off("child_added"); 
    //ActivityIndicator.hide(); 
    $('#cmessage').val(''); 
}); 

Answer 1

、私はDeviceReady関数内怒鳴るイベントのリスナーを入れて、それが私に問題を解決しました。あなたはonDeviceReady上のファイルの変更ハンドラを登録移動することができます

Googleの暗示は

[を怒鳴りますか？ upload2galleryに配置すると、画像をクリックするたびにupload2galleryが呼び出されるので、問題を起こすファイル変更イベントを再度登録しているため、問題が発生します。

var filebutton = document.getElementById("photosubmit"); 
filebutton.addEventListener('change', function(e) { 
    //Get The File 
    var file = e.target.files[0]; 
    var storageRef = firebase.storage().ref('sweet_gift/' + file.name); 
    var task = storageRef.put(file); 
    task.on('state_changed', 
     function progress(snapshot) { 

      var load = '<h1>Please Wait</h1>' + 
       '<i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i> <span>Loading ...</span>'; 
      $.mobile.loading('show', { 
       text: 'Please wait...', 
       textVisible: true, 
       html: load, 
       theme: 'z' 
      }); 
     }, 
     function error(err) { 

     }, 
     function complete() { 
      $.mobile.loading('hide'); 
      var uni = localStorage.getItem("lunicode"); 
      var ref = firebase.database().ref(uni); 
      var myname = storage.getItem("uname"); 
      var myid = storage.getItem("myid"); 
      var downloadURL = task.snapshot.downloadURL; 
      ref.push({ 
       name: myname, 
       imageurl: downloadURL, 
       photoUrl: "/images/profile_placeholder.png", 
       my_id: myid, 
      }); 
     } 
    ); 

});