File upload with jQuery plugin – Simple Upload
We use Simple Upload jQuery plugin to upload the file using the plugin. Here is full code sample example with the plugin.
How to install plugin in your project
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript" src="/js/simpleUpload.min.js"></script>
How to use plugin:
First, bind the plugin to your HTML file element.
$('input[type=file]').change(function(){ $(this).simpleUpload("YOUR_BACKEND_URL", { allowedExts: ["jpg", "jpeg", "jpe", "jif", "jfif", "jfi", "png", "gif"], allowedTypes: ["image/pjpeg", "image/jpeg", "image/png", "image/x-png", "image/gif", "image/x-gif"], maxFileSize: 10000000, //10MB in bytes start: function(file){ //upload started this.block = $('<div class="block"></div>'); this.progressBar = $('<div class="progressBar"></div>'); this.cancelButton = $('<div class="cancelButton">x</div>'); var that = this; this.cancelButton.click(function(){ that.upload.cancel(); //now, the cancel callback will be called }); this.block.append(this.progressBar).append(this.cancelButton); $('#uploads').append(this.block); }, progress: function(progress){ //received progress this.progressBar.width(progress + "%"); }, success: function(data){ //upload successful this.progressBar.remove(); this.cancelButton.remove(); this.block.remove(); var data = JSON.parse(data); if (data.status == 'success') { var htm = ''; htm += '<div class="col-md-3 mg-t-30 ui-state-default" id="image_'+data.imageId +'" data-id="'+data.imageId +'">'+ '<div class="card">'+ '<img class="img-fluid" src="'+ SITE_URL +''+data.path +'" alt="Image">'+ '<div class="card-body">'+ '<p class="card-text" data-id="'+data.imageId +'">'+data.originalName +'</p>'+ '<label>'+ '<a href="javascript:void(0)" class="edit_name btn-sm" data-id="'+data.imageId +'" data-name="'+data.originalName +'"><i class="fa fa-edit"></i></a>'+ '<a href="javascript:void(0)" class="delete_image btn-sm" data-id="'+data.imageId +'"><i class="fa fa-close"></i></a>'+ '<a href="javascript:void(0)" class="copy btn-sm" data-copy-link="'+ SITE_URL +'/project/'+data.unique_key +'" data-container="body" data-popover-color="primary" data-placement="top" title="COPIED" onclick="copyText(this)"><i class="fa fa-link"></i></a>'+ '</label>'+ '</div>'+ '</div>'+ '</div>'; $('#images').append(htm); bindPopover(); } else { //our application returned an error var error = data.msg; var errorDiv = $('<div class="error"></div>').text(error); this.block.append(errorDiv); } }, error: function(error){ //upload failed this.progressBar.remove(); this.cancelButton.remove(); var error = error.message; var errorDiv = $('<div class="error"></div>').text(error); this.block.append(errorDiv); var block = this.block; setTimeout(function(){ block.remove(); },1000); }, cancel: function(){ //upload cancelled this.block.fadeOut(400, function(){ $(this).remove(); }); } }); });
Here are some properties of the plugin which we can use with simple upload.
allowedExts: [“jpg”, “jpeg”, “jpe”, “jif”, “jfif”, “jfi”, “png”, “gif”],
allowedTypes: [“image/pjpeg”, “image/jpeg”, “image/png”, “image/x-png”, “image/gif”, “image/x-gif”],
maxFileSize: 10000000, //10MB in bytes
start: function(){},
progress: function(){},
success: function(){},
error: function(){},
cancel: function(){},
and read more here