Skip to content

Commit 00cf880

Browse files
nirajrajgornirajrajgor
committed
Demo3 for width & height preview added
1 parent a650d19 commit 00cf880

File tree

1 file changed

+158
-2
lines changed

1 file changed

+158
-2
lines changed

Diff for: ‎index.html

+158-2
Original file line numberDiff line numberDiff line change
@@ -40,10 +40,13 @@
4040
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
4141
<ul class="nav navbar-nav navbar-right">
4242
<li>
43-
<a href="#demo1">Demo1</a>
43+
<a data-toggle="collapse" data-target=".navbar-collapse.in" href="#demo1">Demo1</a>
4444
</li>
4545
<li>
46-
<a href="#demo2">Demo2</a>
46+
<a data-toggle="collapse" data-target=".navbar-collapse.in" href="#demo2">Demo2</a>
47+
</li>
48+
<li>
49+
<a data-toggle="collapse" data-target=".navbar-collapse.in" href="#demo3">Demo3</a>
4750
</li>
4851
<li>
4952
<a href="https://github.com/nirajrajgor/jquery-upload-image-customization" target="_blank">
@@ -357,6 +360,159 @@ <h3>JavaScript code</h3>
357360
</div>
358361
</div>
359362

363+
<div class="container">
364+
<div class="row" id="demo3">
365+
<div class="col-xs-12">
366+
<h2 class="title">Demo3 - Image Preview with Dimension restriction</h2>
367+
</div>
368+
<div class="col-sm-4 col-md-4 col-xs-12">
369+
<div class="block-heading">
370+
<h3>Select Image</h3>
371+
</div>
372+
<form action="#" method="post" id="demo3-form">
373+
<label class="btn profile-2" for="my-profile-file-selector-2">
374+
<input id="my-profile-file-selector-2" type="file">Upload
375+
</label>
376+
<span class='' id="upload-profile-file-info-2"></span>
377+
<h4 id="upload-profile-error-2" class="text-danger"></h4>
378+
<img id="upload-profile-image-2" src="" class="img-responsive" alt="">
379+
<button class="btn" id="remove-profile-btn-2">Remove</button>
380+
</form>
381+
</div>
382+
383+
<div class="col-sm-4 col-md-4 col-xs-12">
384+
<div class="block-heading">
385+
<h3>html code</h3>
386+
</div>
387+
<a href="javascript:;" class="btn-absolute btn-outline html-copy-2">Copy</a>
388+
<div class="code-section">
389+
<pre id="html-code-2">
390+
&lt;form action="#" method="post" id="demo1-form"&gt;
391+
&lt;label class="btn profile" for="my-profile-file-selector"&gt;
392+
&lt;input id="my-profile-file-selector" type="file"&gt;Upload
393+
&lt;/label&gt;
394+
&lt;span class='' id="upload-profile-file-info"&gt;&lt;/span&gt;
395+
&lt;h4 id="upload-profile-error" class="text-danger"&gt;&lt;/h4&gt;
396+
&lt;img id="upload-profile-image" src="" class="img-responsive" alt=""&gt;
397+
&lt;button class="btn" id="remove-profile-btn"&gt;Remove&lt;/button&gt;
398+
&lt;/form&gt;
399+
</pre>
400+
</div>
401+
<div class="css-section">
402+
<div class="block-heading">
403+
<h3>css code</h3>
404+
</div>
405+
<a href="javascript:;" class="btn-absolute btn-outline css-copy-2">Copy</a>
406+
<div class="code-section css-code">
407+
<pre id="css-code-2">
408+
.btn{
409+
padding: 8px 34px;
410+
background-color: #9c27b0; color: #fff;
411+
font-size: 16px; border-radius: 0;
412+
}
413+
.btn:hover{
414+
color: #fff !important;
415+
}
416+
#remove-profile-btn{
417+
display: none;
418+
margin-top: 12px;
419+
}
420+
#my-profile-file-selector{
421+
display: none;
422+
}
423+
</pre>
424+
</div>
425+
</div>
426+
</div>
427+
428+
<div class="col-sm-4 col-md-4 col-xs-12">
429+
<div class="block-heading">
430+
<h3>JavaScript code</h3>
431+
</div>
432+
<a href="javascript:;" class="btn-absolute btn-outline js-copy-2">Copy</a>
433+
<div class="code-section js-code">
434+
<pre id="js-code-2">
435+
$(function(){
436+
// Initialization code with Width, Height Parameter
437+
$('body').on("change", "#my-profile-file-selector", function(){
438+
checkProfileSize({
439+
width: 1280,
440+
height: 720
441+
});
442+
})
443+
// When Remove button clicked
444+
$('#remove-profile-btn').on('click', function(event) {
445+
event.preventDefault();
446+
// make image view empty
447+
$('#upload-profile-image').attr('src', '');
448+
// make file name empty
449+
$('#upload-profile-file-info').html('');
450+
// make input file value empty
451+
$('input#my-profile-file-selector[type=file]').val('')
452+
// remove hide button
453+
$('#remove-profile-btn').hide();
454+
// show upload button again
455+
$('label.profile').show();
456+
});
457+
});
458+
// Function that executes all options
459+
function checkProfileSize(arg){
460+
$('#upload-profile-image').attr('src', '');
461+
$('#upload-profile-file-info').html('');
462+
$('#upload-profile-error').html('');
463+
var fileInput = $('form').find("input#my-profile-file-selector[type=file]")[0],
464+
file = fileInput.files && fileInput.files[0];
465+
var sizeKB = file.size / 1024;
466+
var tmppath = URL.createObjectURL(event.target.files[0]);
467+
var maxSize = arg.size || sizeKB;
468+
var imgHeight, imgWidth;
469+
if( file ) {
470+
var img = new Image();
471+
img.src = window.URL.createObjectURL( file );
472+
img.onload = function() {
473+
var width = img.naturalWidth, height = img.naturalHeight;
474+
window.URL.revokeObjectURL( img.src );
475+
imgWidth = arg.width || width;
476+
imgHeight = arg.height || height;
477+
if( sizeKB <= maxSize) {
478+
if( width == imgWidth && height == imgHeight){
479+
var fileName = $('input#my-profile-file-selector[type=file]').val();
480+
fileName = fileName.substr(fileName.lastIndexOf("\\")+1);
481+
$('#upload-profile-image').attr('src', tmppath);
482+
$('#upload-profile-file-info').html(fileName);
483+
$('label.profile').hide();
484+
$('#remove-profile-btn').show();
485+
}
486+
else{
487+
imgWidth = arg.width || "any";
488+
imgHeight = arg.height || "any";
489+
$('#upload-profile-error')
490+
.html('Uploaded Picture Width should be '+ imgWidth+' and Height should be '+imgHeight);
491+
var fileName = $('input#my-profile-file-selector[type=file]').val();
492+
}
493+
}
494+
else {
495+
$('#upload-profile-error').html('Uploaded Profile picture size should be less than '+maxSize+'KB');
496+
var fileName = $('input#my-profile-file-selector[type=file]').val();
497+
}
498+
};
499+
}
500+
else { //No file was input or browser doesn't support client side reading
501+
console.log('No file selected');
502+
}
503+
}
504+
</pre>
505+
</div>
506+
</div>
507+
508+
<div class="col-xs-12" style="margin-top: 15px;">
509+
<div class="alert alert-info" role="alert">Note: Dimensions are checked for exact width &amp; height provided during initialization. If you want to restrict only width of image then that can also be done, just pass width in KB during initialization &amp; don't provide height.</div>
510+
</div>
511+
512+
513+
</div>
514+
</div>
515+
360516
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
361517
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
362518
<!-- Include all compiled plugins (below), or include individual files as needed -->

0 commit comments

Comments
 (0)