Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 00cf880

Browse files
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

‎index.html‎

Lines changed: 158 additions & 2 deletions
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)

AltStyle によって変換されたページ (->オリジナル) /