当我将图像上传到firebase存储并检索下载url并在img标记中显示时，但它显示多次

Question

我正在上传一个图像到firebase存储，并再次在firebase数据库中存储URL路径。然而，当我第一次上传时，它显示一次，但是当我再次上传到画廊并选择图像时，它显示两次。如果我再次进入图库并选择它显示三次的图像。请指导我如何解决这个问题。

<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

根据Firebase Google支持工程师的建议，我将下面的事件监听器放在DeviceReady函数中，它为我解决了这个问题。

Google建议下面

[你可以在onDeviceReady上注册文件更改处理程序吗?]如果你把它放在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,
             });
         }
     );
 });