javascript - Restrict filetype ,size,single upload doesn't work in jquery file upload -
i trying use blueimp jquery file upload plugin spring mvc upload excel files.the files getting uploaded. restrict file type excel(xls,xlxs),also allow single file uploads . using parameters recommended plugin, tried adding add: callback perform validation neither of works . please .
the js file i'm using(in same order)
jquery.min.js <!-- jquery ui widget factory, can omitted if jquery ui included --> jquery.ui.widget.js <!-- iframe transport required browsers without support xhr file uploads --> jquery.iframe-transport.js <!-- basic file upload plugin --> jquery.fileupload.js bootstrap.min.js my html code is
<!-- fileinput-button span used style file input field button --> <span class="btn btn-default fileinput-button"> <i class="fa fa-1x fa-plus"></i> <span>select files...</span> <!-- file input field used target file upload widget --> <input id="fileupload" type="file" name="files[]" data-url="file/upload" multiple> </span> <br> <br> <!-- global progress bar --> <div id="progress" class="progress"> <div class="progress-bar progress-bar-success"></div> </div> <!-- container uploaded files --> <div id="files" class="files"></div> <table id="uploaded-files" class="table table-striped table-bordered datatable"> <tr> <th>file name</th> <th>file size</th> <th>file type</th> <th>download</th> </tr> </table> the javascript code is:
$(function() { 'use strict'; // location of server-side upload handler: var url = ''; $('#fileupload') .fileupload( { //this doesnt work add : function(e, data) { var uploaderrors = []; var acceptfiletypes = /(\.|\/)(xls|xlsx)$/i; alert(acceptfiletypes .test(data.originalfiles[0].type)); if (data.originalfiles[0]['type'].length && acceptfiletypes .test(data.originalfiles[0].type)) { uploaderrors .push('not accepted file type'); } if (data.originalfiles[0]['size'].length && data.originalfiles[0]['size'] > 5000000) { uploaderrors .push('filesize big'); } if (uploaderrors.length > 0) { alert(uploaderrors.join("\n")); } else { data.submit(); } }, datatype: 'json', maxfilesize : 50000,//this doesnt work acceptfiletypes : /(\.|\/)(xls|xlsx)$/i, //this doesnt work singlefileuploads : true, maxnumberoffiles : 1, done: function (e, data) { $("tr:has(td)").remove(); $.each(data.result, function (index, file) { $("#uploaded-files").append( $('<tr/>') .append($('<td/>').text(file.filename)) .append($('<td/>').text(file.filesize)) .append($('<td/>').text(file.filetype)) .append($('<td/>').html("<a href='file/get/"+index+"'>click</a>")) )//end $("#uploaded-files").append() }); }, fail : function(e, data) { $ .each( data.messages, function(index, error) { $( '<p style="color: red;">upload file error: ' + error + '<i class="elusive-remove" style="padding-left:10px;"/></p>') .appendto( '#files'); }); }, progressall : function(e, data) { var progress = parseint(data.loaded / data.total * 100, 10); $('#progress .progress-bar').css('width', progress + '%'); } }).prop('disabled', !$.support.fileinput).parent() .addclass($.support.fileinput ? undefined : 'disabled'); });
i found solution myself reason following attributes doesnt work on basic jquery blueimp file upload
maxfilesize : 50000,//this doesnt work acceptfiletypes : /(\.|\/)(xls|xlsx)$/i, //this doesnt work singlefileuploads : true, maxnumberoffiles : 1, so had use add: callback mentioned in question little changes callback above got working.here new callback:
add : function(e, data) { var uploaderrors = []; if (!(/(\.|\/)(xls|xlsx)$/i) .test(data.files[0].name)) { uploaderrors .push('not accepted file type'); } if (data.files[0].size > 5000000) { uploaderrors .push('filesize big'); } if (uploaderrors.length > 0) { alert(uploaderrors.join("\n")); } else { data.submit(); $('#fileupload').fileupload('disable'); } },
Comments
Post a Comment