javascript - Reuse of Code by changing Selector -
i beginner in programming. looking way reuse image preview jquery code in external file. want make form has multiple images in , want preview images before submitting. single image preview code follows:
$(function () { test = { updatepreview: function (obj) { // if ie < 10 doesn't support filereader if (!window.filereader) { // don't know how proceed assign src 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 id of image tag.
i absolute beginner in programming please guide me in step step. thanks
define way:
$(function () { test = { updatepreview: function (obj, selector) { // if ie < 10 doesn't support filereader if (!window.filereader) { // don't know how proceed assign src 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 way:
test.updatepreview(obj, "#preview"); test.updatepreview(obj, "#preview2"); or attach function prototype given jean-paul:
(function($){ $.fn.updatepreview = function(obj) { // if ie < 10 doesn't support filereader if (!window.filereader) { // don't know how proceed assign src 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 way:
$("#preview").updatepreview(obj); $("#preview2").updatepreview(obj); but instead of reinventing wheel (from this answer), can use ready-to-go code such this example previews images upon load.
Comments
Post a Comment