Reuse of Code by changing Selector

Question

I am a beginner in programming. I am looking a way to reuse my Image preview JQuery Code in external file. I want to make a form which has multiple images in it and I want to preview all the images before submitting. My single image preview code is as follows:

$(function () {
    Test = {
        UpdatePreview: function (obj) {
            // if IE < 10 doesn't support FileReader
            if (!window.FileReader) {
                // don't know how to proceed to assign src to image tag
            } else {
                var reader = new FileReader();
                var target = null;

                reader.onload = function (e) {
                    target = e.target || e.srcElement;
                    $("#preview").attr("src", target.result);
                };
                reader.readAsDataURL(obj.files[0]);
            }
        }
    };
});

where preview is the id of my image tag.

I am absolute beginner in programming so please guide me in step by step. Thanks

Answer 1

Define this way:

$(function () {
    Test = {
        UpdatePreview: function (obj, selector) {
            // if IE < 10 doesn't support FileReader
            if (!window.FileReader) {
                // don't know how to proceed to assign src to image tag
            } else {
                var reader = new FileReader();
                var target = null;

                reader.onload = function (e) {
                    target = e.target || e.srcElement;
                    $(selector).attr("src", target.result);
                };
                reader.readAsDataURL(obj.files[0]);
            }
        }
    };
});

Call this way:

Test.UpdatePreview(obj, "#preview");
Test.UpdatePreview(obj, "#preview2");

Or attach a function to the prototype as given by Jean-Paul:

(function($){
    $.fn.UpdatePreview = function(obj) {
            // if IE < 10 doesn't support FileReader
            if (!window.FileReader) {
            // don't know how to proceed to assign src to image tag
            } else {
                var reader = new FileReader();
                var target = null;

                reader.onload = function (e) {
                    target = e.target || e.srcElement;
                        $(this).attr("src", target.result);
                    };
                reader.readAsDataURL(obj.files[0]);
            }
        }        
    }; 
})( jQuery );

And call this way:

$("#preview").UpdatePreview(obj);
$("#preview2").UpdatePreview(obj);

But instead of reinventing the wheel (from this answer), you can also use ready-to-go code such as this example which previews images upon load.

Answer 2

What you need to do is create a function that simply works on the object that calls it.

A very nice example is the following function:

(function($){
   $.fn.myfunction = function() {
      alert(this.text());
      return this;
   }; 
})(jQuery);

This function will alert() the text of the div with which you call the function. As an example, let's say we have the following div:

<div id="my_div">Test</div>

Now if I call the function as follows:

$('#my_div').myfunction();

The resulting alert message will say 'Test' (see for yourself in this demo).

This because myfunction uses the keyword this to identify the calling object.

This also what you need to do for your function: make it a general function such that it works for every calling object. Then you simply call it with your individual images and it should work.

Changing your code to allow for this, you would end up with something similar to:

(function($){
    $.fn.UpdatePreview = function(obj) {
            // if IE < 10 doesn't support FileReader
            if (!window.FileReader) {
            // don't know how to proceed to assign src to image tag
            } else {
                var reader = new FileReader();
                var target = null;

                reader.onload = function (e) {
                    target = e.target || e.srcElement;
                        $(this).attr("src", target.result);
                    };
                reader.readAsDataURL(obj.files[0]);
            }
        }        
    }; 
})(jQuery);

However, this function is still quit far from finished as you still need to make sure the corresponding images are loaded and you still need to create a div display in which you preview the images. Instead of reinventing the wheel yourself, why don't you just copy ready-to-go code?

For example, this jsFiddle shows a beautiful FileReader with preview.