@@ -124,6 +124,76 @@ <h3>css code</h3>
124124 < h3 > JavaScript code</ h3 >
125125 </ div >
126126 < a href ="# " class ="btn-absolute btn-outline "> Copy</ a >
127+ < div class ="code-section js-code ">
128+ < pre >
129+ $(function(){
130+ // Initialization code
131+ $('body').on("change", "#my-profile-file-selector", function(){
132+ checkProfileSize();
133+ })
134+ // When Remove button clicked
135+ $('#remove-profile-btn').on('click', function(event) {
136+ event.preventDefault();
137+ // make image view empty
138+ $('#upload-profile-image').attr('src', '');
139+ // make file name empty
140+ $('#upload-profile-file-info').html('');
141+ // make input file value empty
142+ $('input#my-profile-file-selector[type=file]').val('')
143+ // remove hide button
144+ $('#remove-profile-btn').hide();
145+ // show upload button again
146+ $('label.profile').show();
147+ });
148+ });
149+ // Function that executes all options
150+ function checkProfileSize(arg){
151+ $('#upload-profile-image').attr('src', '');
152+ $('#upload-profile-file-info').html('');
153+ $('#upload-profile-error').html('');
154+ var fileInput = $('form').find("input#my-profile-file-selector[type=file]")[0],
155+ file = fileInput.files && fileInput.files[0];
156+ var sizeKB = file.size / 1024;
157+ var tmppath = URL.createObjectURL(event.target.files[0]);
158+ var maxSize = arg.size || sizeKB;
159+ var imgHeight, imgWidth;
160+ if( file ) {
161+ var img = new Image();
162+ img.src = window.URL.createObjectURL( file );
163+ img.onload = function() {
164+ var width = img.naturalWidth, height = img.naturalHeight;
165+ window.URL.revokeObjectURL( img.src );
166+ imgWidth = arg.width || width;
167+ imgHeight = arg.height || height;
168+ if( sizeKB < = maxSize) {
169+ if( width == imgWidth && height == imgHeight){
170+ var fileName = $('input#my-profile-file-selector[type=file]').val();
171+ fileName = fileName.substr(fileName.lastIndexOf("\\")+1);
172+ $('#upload-profile-image').attr('src', tmppath);
173+ $('#upload-profile-file-info').html(fileName);
174+ $('label.profile').hide();
175+ $('#remove-profile-btn').show();
176+ }
177+ else{
178+ imgWidth = arg.width || "any";
179+ imgHeight = arg.height || "any";
180+ $('#upload-profile-error')
181+ .html('Uploaded Picture Width should be '+ imgWidth+' and Height should be '+imgHeight);
182+ var fileName = $('input#my-profile-file-selector[type=file]').val();
183+ }
184+ }
185+ else {
186+ $('#upload-profile-error').html('Uploaded Profile picture size should be less than '+maxSize+'KB');
187+ var fileName = $('input#my-profile-file-selector[type=file]').val();
188+ }
189+ };
190+ }
191+ else { //No file was input or browser doesn't support client side reading
192+ console.log('No file selected');
193+ }
194+ }
195+ </ pre >
196+ </ div >
127197 </ div >
128198
129199 </ div >
0 commit comments