Jquery | How can I make a custom function and call it?

Question

I think the quality of question is very low but I would be very appreciate that you guys give me some solution.

The part of code is duplicated in two functions. I want to arrange this long code to short. Below example is what i want to do.

void duplicatedFunc() {
    //some logic
}

void func1() {
    duplicatedFunc();
}

void func2() {
    //func2 logic here..
    duplicatedFunc();
}

How can I do this in jquery ?? Here is my jquery code.

                $("#inputLogo").change(function(){

                $("#logoFile div.notyet").remove(); 
                var file = this.files[0];   
                var fr = new FileReader();

                fr.onload = (function (file) {
                        return function(e){
                        var div = document.createElement("div");

                        $(div).addClass("notyet").css({
                            margin : "30px"
                            ,position : "relative"
                        }); 

                        var html = ['<input type="hidden" name="inputLogo" value="' + file.name + '">'
                                    ,'<img src="" width="100%">'
                                    ,'<button type="button" class="close img-close" aria-label="Close"><span aria-hidden="true">&times;</span></button>'
                                    ].join(""); 

                        $(div).append(html);    
                        $(div).find("button").click(function(){
                            $(this).parent().remove();
                        }); 

                        $(div).find("img").attr("src", e.target.result);    
                        $("#logoFile").append(div);
                    }   
                })(file);
                fr.readAsDataURL(file); 
            });

            $("#logo").change(function(){
                // 새로운 이미지 추가할때 기존 이미지 삭제 (서버에서도 삭제)            
                if ($('#logoFile').find('img').length){
                    var targetDom = document.getElementById( "logoFile" );
                    var targetInput = document.createElement("input");
                    targetInput.setAttribute("name", "del_icon" );
                    targetInput.setAttribute("type","hidden");
                    targetDom.appendChild(targetInput);
                    //alert(targetInput.getAttribute("name"));
                    var filename = $('#logoFile').find("input[name='inputLogo']").val();
                    //alert(filename);
                    targetInput.setAttribute("value", filename);    
                    $('#insertLogo').children().remove(); 
                }                                                                           

                $("#logoFile div.notyet").remove(); 
                var file = this.files[0];   
                var fr = new FileReader();

                fr.onload = (function (file) {
                        return function(e){
                        var div = document.createElement("div");

                        $(div).addClass("notyet").css({
                            margin : "30px"
                            ,position : "relative"
                        }); 

                        var html = ['<input type="hidden" name="inputLogo" value="' + file.name + '">'
                                    ,'<img src="" width="100%">'
                                    ,'<button type="button" class="close img-close" aria-label="Close"><span aria-hidden="true">&times;</span></button>'
                                    ].join(""); 

                        $(div).append(html);    
                        $(div).find("button").click(function(){
                            $(this).parent().remove();
                        }); 

                        $(div).find("img").attr("src", e.target.result);    
                        $("#logoFile").append(div);
                    }   
                })(file);
                fr.readAsDataURL(file); 
            });
    </script> 

I want my code looks clean. How can i fix my code?

Answer 1

    var processFile = function processFile(file) {
      return (function(file) {
        return function(e) {
          var div = document.createElement("div");

          $(div).addClass("notyet").css({
            margin: "30px",
            position: "relative"
          });

          var html = ['<input type="hidden" name="inputLogo" value="' + file.name + '">', '<img src="" width="100%">', '<button type="button" class="close img-close" aria-label="Close"><span aria-hidden="true">&times;</span></button>'].join("");

          $(div).append(html);
          $(div).find("button").click(function() {
            $(this).parent().remove();
          });

          $(div).find("img").attr("src", e.target.result);
          $("#logoFile").append(div);
        }
      })(file)
    };

    $("#inputLogo").change(function() {
    // do stuff
    fr.onload = processFile;
    // do stuff
    });

    $("#logo").change(function() {
    // do stuff
    fr.onload = processFile;
    // do stuff
    });