基于 Bootstrap File Input v4.3.2 上传文件时，新增 POST 参数的实现
1、Bootstrap File Input 是一款非常优秀的HTML5文件上传插件，支持文件预览、多选等一系列特性。基于 Bootstrap File Input v4.3.2 上传文件时，现有参数：upfile、file_id。如图1
图1
2、现在需要新增参数：type，基于单选按钮的选择：视频、音频，设置其对应值：video、audio。如图2
图2
3、参考官网：http://www.bootstrap-fileinput.com/options.html 。配置项：uploadExtraData，将作为数据通过 POST 传递给 url/AJAX 服务器调用的额外数据。 此属性仅适用于 ajax 上传，并且当您为 uploadUrl 设置了值时。如图3
图3
4、编辑 JS 代码，添加：uploadExtraData: {type: ‘video’},。如图4
图4
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 | function initUploadMediaFile(id, type) { var container = $('body'); if (id) { container = $(id); } var uploadFiles = container.find('input[data-target="uploadMediaFile"]'); $.each(uploadFiles, function (i, v) { $_self = $(v); var initialPreview = []; var initialPreviewConfig = []; var previewImage = $('input[name="' + $_self.attr('data-for') + '"]').attr('data-preview') || $('input[name="' + $_self.attr('data-for') + '"]').val(); if (previewImage) { initialPreview.push(previewImage); initialPreviewConfig.push({key: getFileName(previewImage)}) } var maxFileSize = 512000; var msgSizeTooLargeUnit = '512000KB'; $_self.fileinput({ allowedFileTypes: ['video', 'audio'], language: 'zh', initialPreview: initialPreview, initialPreviewConfig: initialPreviewConfig, showPreview: false, deleteUrl: '', // initialPreviewAsData: true, multiple: false, maxFileSize: maxFileSize, msgSizeTooLarge: '建议上传不超过' + msgSizeTooLargeUnit + '大小的图像！', allowedFileExtensions: ["'" + type + "'"], uploadUrl: "/web-api/vms/upload", uploadExtraData: {type: 'video'}, overwriteInitial: true, dropZoneEnabled: false, showUpload: false, //是否显示上传按钮 uploadAsync: true }).on("filebatchselected", function(event, files) { $(this).fileinput("upload"); }).on('fileuploaded', function (event, data, previewId, index) { $.isLoading('hide'); if (data.response.code == 0) { // alert(JSON.stringify(data)); if (typeof window.uploadFilesSuccess !== 'undefined') { window.uploadFilesSuccess(data.response.id, $(event.target).attr('data-for')); } // $('#'+previewId).attr('data-code',getFileName(data.response.result.attachment)); // $('input[name="'+$(event.target).attr('data-for')+'"]').val(data.response.result.original); $('#' + previewId).attr('data-code', getFileName(data.response.id)); $('input[name="' + $(event.target).attr('data-for') + '"]').val(data.response.id); } else { utils.showNotification('上传文件失败', 3); } }).on('filecleared', function (event) { // console.log(event, 1); $('input[name="' + $(event.target).attr('data-for') + '"]').val(''); }).on('iledeleted', function (event, key) { $('input[name="' + $(event.target).attr('data-for') + '"]').val(''); }).on('filereset', function (event) { $('input[name="' + $(event.target).attr('data-for') + '"]').val(''); }).on('filepreupload', function (event) { $('.kv-upload-progress').show(); $.isLoading({text: '数据提交中，请稍后。。。'}); }).on('filesuccessremove', function (event, id) { $('input[name="' + $(event.target).attr('data-for') + '"]').val(''); }).on('fileuploaderror', function (event, data, msg) { $.isLoading('hide'); $('.kv-upload-progress').hide(); utils.showNotification('上传文件失败', 3); }); })} |
5、测试功能，上传文件时，新增 POST 参数 ( type: video ) 成功实现。如图5
图5
6、在调整此函数时，基于单选按钮的选择，再增加一个函数参数 $type 就可以实现预期的文件类型的效果。function initUploadMediaFile(id, type, filetype) 。符合预期。如图6
图6
近期评论