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 bc0b680

Browse files
Demo2 added successfully. Along with every function.
1 parent e38974a commit bc0b680

File tree

1 file changed

+158
-1
lines changed

1 file changed

+158
-1
lines changed

‎index.html

Lines changed: 158 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@
3333
<span class="icon-bar"></span>
3434
<span class="icon-bar"></span>
3535
</button>
36-
<a class="navbar-brand" href="#!">jquery-upload-image-customization</a>
36+
<a class="navbar-brand" href="#!">Upload-image-customization</a>
3737
</div>
3838

3939
<!-- Collect the nav links, forms, and other content for toggling -->
@@ -42,6 +42,9 @@
4242
<li>
4343
<a href="#demo1">Demo1</a>
4444
</li>
45+
<li>
46+
<a href="#demo2">Demo2</a>
47+
</li>
4548
<li>
4649
<a href="https://github.com/nirajrajgor/jquery-upload-image-customization" target="_blank">
4750
<i class="fa fa-github"></i> Github
@@ -200,6 +203,160 @@ <h3>JavaScript code</h3>
200203

201204
</div>
202205

206+
<div class="container">
207+
<div class="row" id="demo2">
208+
<div class="col-xs-12">
209+
<h2 class="title">Demo2 - Image Preview with Size restriction</h2>
210+
</div>
211+
<div class="col-sm-4 col-md-4 col-xs-12">
212+
<div class="block-heading">
213+
<h3>Select Image</h3>
214+
</div>
215+
216+
<form action="#" method="post" id="demo2-form">
217+
<label class="btn profile-1" for="my-profile-file-selector-1">
218+
<input id="my-profile-file-selector-1" type="file">Upload
219+
</label>
220+
<span class='' id="upload-profile-file-info-1"></span>
221+
<h4 id="upload-profile-error-1" class="text-danger"></h4>
222+
<img id="upload-profile-image-1" src="" class="img-responsive" alt="">
223+
<button class="btn" id="remove-profile-btn-1">Remove</button>
224+
</form>
225+
226+
</div>
227+
228+
<div class="col-sm-4 col-md-4 col-xs-12">
229+
<div class="block-heading">
230+
<h3>html code</h3>
231+
</div>
232+
<a href="javascript:;" class="btn-absolute btn-outline html-copy-1">Copy</a>
233+
<div class="code-section">
234+
<pre id="html-code-1">
235+
&lt;form action="#" method="post" id="demo1-form"&gt;
236+
&lt;label class="btn profile" for="my-profile-file-selector"&gt;
237+
&lt;input id="my-profile-file-selector" type="file"&gt;Upload
238+
&lt;/label&gt;
239+
&lt;span class='' id="upload-profile-file-info"&gt;&lt;/span&gt;
240+
&lt;h4 id="upload-profile-error" class="text-danger"&gt;&lt;/h4&gt;
241+
&lt;img id="upload-profile-image" src="" class="img-responsive" alt=""&gt;
242+
&lt;button class="btn" id="remove-profile-btn"&gt;Remove&lt;/button&gt;
243+
&lt;/form&gt;
244+
</pre>
245+
</div>
246+
<div class="css-section">
247+
<div class="block-heading">
248+
<h3>css code</h3>
249+
</div>
250+
<a href="javascript:;" class="btn-absolute btn-outline css-copy-1">Copy</a>
251+
<div class="code-section css-code">
252+
<pre id="css-code-1">
253+
.btn{
254+
padding: 8px 34px;
255+
background-color: #9c27b0; color: #fff;
256+
font-size: 16px; border-radius: 0;
257+
}
258+
.btn:hover{
259+
color: #fff !important;
260+
}
261+
#remove-profile-btn{
262+
display: none;
263+
margin-top: 12px;
264+
}
265+
#my-profile-file-selector{
266+
display: none;
267+
}
268+
</pre>
269+
</div>
270+
</div>
271+
</div>
272+
273+
<div class="col-sm-4 col-md-4 col-xs-12">
274+
<div class="block-heading">
275+
<h3>JavaScript code</h3>
276+
</div>
277+
<a href="javascript:;" class="btn-absolute btn-outline js-copy-1">Copy</a>
278+
<div class="code-section js-code">
279+
<pre id="js-code-1">
280+
$(function(){
281+
// Initialization code with Size Parameter
282+
$('body').on("change", "#my-profile-file-selector", function(){
283+
checkProfileSize({
284+
size: 200
285+
});
286+
})
287+
// When Remove button clicked
288+
$('#remove-profile-btn').on('click', function(event) {
289+
event.preventDefault();
290+
// make image view empty
291+
$('#upload-profile-image').attr('src', '');
292+
// make file name empty
293+
$('#upload-profile-file-info').html('');
294+
// make input file value empty
295+
$('input#my-profile-file-selector[type=file]').val('')
296+
// remove hide button
297+
$('#remove-profile-btn').hide();
298+
// show upload button again
299+
$('label.profile').show();
300+
});
301+
});
302+
// Function that executes all options
303+
function checkProfileSize(arg){
304+
$('#upload-profile-image').attr('src', '');
305+
$('#upload-profile-file-info').html('');
306+
$('#upload-profile-error').html('');
307+
var fileInput = $('form').find("input#my-profile-file-selector[type=file]")[0],
308+
file = fileInput.files && fileInput.files[0];
309+
var sizeKB = file.size / 1024;
310+
var tmppath = URL.createObjectURL(event.target.files[0]);
311+
var maxSize = arg.size || sizeKB;
312+
var imgHeight, imgWidth;
313+
if( file ) {
314+
var img = new Image();
315+
img.src = window.URL.createObjectURL( file );
316+
img.onload = function() {
317+
var width = img.naturalWidth, height = img.naturalHeight;
318+
window.URL.revokeObjectURL( img.src );
319+
imgWidth = arg.width || width;
320+
imgHeight = arg.height || height;
321+
if( sizeKB <= maxSize) {
322+
if( width == imgWidth && height == imgHeight){
323+
var fileName = $('input#my-profile-file-selector[type=file]').val();
324+
fileName = fileName.substr(fileName.lastIndexOf("\\")+1);
325+
$('#upload-profile-image').attr('src', tmppath);
326+
$('#upload-profile-file-info').html(fileName);
327+
$('label.profile').hide();
328+
$('#remove-profile-btn').show();
329+
}
330+
else{
331+
imgWidth = arg.width || "any";
332+
imgHeight = arg.height || "any";
333+
$('#upload-profile-error')
334+
.html('Uploaded Picture Width should be '+ imgWidth+' and Height should be '+imgHeight);
335+
var fileName = $('input#my-profile-file-selector[type=file]').val();
336+
}
337+
}
338+
else {
339+
$('#upload-profile-error').html('Uploaded Profile picture size should be less than '+maxSize+'KB');
340+
var fileName = $('input#my-profile-file-selector[type=file]').val();
341+
}
342+
};
343+
}
344+
else { //No file was input or browser doesn't support client side reading
345+
console.log('No file selected');
346+
}
347+
}
348+
</pre>
349+
</div>
350+
</div>
351+
352+
<div class="col-xs-12" style="margin-top: 15px;">
353+
<div class="alert alert-info" role="alert">Note: The Size is provided during initialization in js code. The image with size less than amount provided in initialization will be uploaded & previewed. Provide size in KB. Read js code for more info.</div>
354+
</div>
355+
356+
357+
</div>
358+
</div>
359+
203360
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
204361
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
205362
<!-- Include all compiled plugins (below), or include individual files as needed -->

0 commit comments

Comments
(0)

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