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

Popular posts from this blog

javascript - Google App Script ContentService downloadAsFile not working -

javascript - Function overwritting -

php - Find a regex to take part of Email -