脚本宝典收集整理的这篇文章主要介绍了bootstrap-fileinput上传控件,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
// 初始化上传控件 $(".file-upload").fileinput({ uploadUrl: ctx + 'general/mateSub/uploadFtp', maxTotalFileCount: 1, // maxFileSize: 2097152, // 单位kb maxFilePreviewSize: 2097152, showCaption: false, // 不显示文件选择框 showClose: false, // 隐藏右上角删除 showRemove: false, fileActionSettings: { // removeClass: 'hideBtn', downloadClass: 'hideBtn', uploadClass: 'hideBtn' }, allowedFileExtensions: ["bmp", "gif", "jpg", "jpeg", "png", "doc", "docx", "xls", "xlsx", "ppt", "pptx", "txt", "rar", "zip", "gz", "bz2", "mp4", "avi", "rmvb", "wav", "wmv", "mpg", "pdf", "mp3"] }).on('fileuploaded', function (event, data, previewId, index) { if (data.response.code === web_status.SUCCESS) { // 将上传的url赋值到输入框 $("input[name='" + event.currentTarget.id + "']").val(data.response.fileName); $("input[name='mateSubSize']").val(data.response.fileSize); } else { $.modal.alertError(data.response.msg); } }).on('filesuccessremove', function (event, id, index) { // 上传之后删除本地素材 var path = $("input[name='" + event.currentTarget.id + "']").val() $.ajax({ url: ctx + "general/mateSub/deleteFile", data: { "fileName": path }, type: "post", success: function (result) { if (result.code === web_status.SUCCESS) { $("input[name='" + event.currentTarget.id + "']").val(''); } else { $.modal.alertError(result.msg); } }, error: function (result) { $.modal.alertError(result.msg); } }); }).on('filebrowse', function (event) { // 这里限制只能选择一个文件,每当点击选择文件时,清除预览图 $(event.target).fileinput('clear'); // 清除文件地址 $("input[name='" + event.currentTarget.id + "']").val('') });
// 文件地址 var fileName = [[${portalMaterial.materialUrl}]]; var fileSize = [[${portalMaterial.materialSize}]]; // 文件是否存在 var exist = [[${exist}]]; // 回显地址 var initialPreview = []; // 回显参数(名称、大小、缩略图等) var initialPreviewConfig = []; var preView = generFilDel(fileName); initialPreview.push(fileName); initialPreviewConfig.push(preView); /** * 封装回显数据类 * @param fileName * @returns {Object} */ function generFilDel(fileName){ var o = new Object(); // 回显的显示的文件名 o.caption = fileName; o.size = fileSize; // 删除地址 o.url = ctx + 'common/delete'; // 删除时额外传递的参数,默认带着key o.extra = function() { return {fileName: fileName}; } // 如果没有地址,默认为图片类型 if( fileName == null || fileName.indexOf(".") == -1 || !exist){ //return {"type":null,"fileType":null}; o.type = "txt"; o.filetype = "text/"+fileTyp; o.caption = "文件已被删除,请重新上传"; return o; } //获取最后一个.的位置 var index= fileName.lastIndexOf("."); //获取后缀 var fileTyp = fileName.substr(index+1); if(["bmp", "gif", "jpg", "jpeg", "png"].join(",").indexOf(fileTyp) !== -1){ o.type = "image"; o.filetype = "image/"+fileTyp; return o; } else if (["mp3"].join(",").indexOf(fileTyp) !== -1) { o.type = "audio"; o.filetype = "audio/"+fileTyp; return o; } else if(["swf", "flv" , "mp4","wav", "wma", "wmv", "mid", "avi", "mpg", "rm", "rmvb"].join(",").indexOf(fileTyp) !== -1) { o.type = "video"; o.filetype = "video/"+fileTyp; return o; } else if (["pdf"].join(",").indexOf(fileTyp) !== -1){ o.type = "pdf"; o.filetype = "pdf/"+fileTyp; } else if (["txt"].join(",").indexOf(fileTyp) !== -1) { o.type = "text"; o.filetype = "text/"+fileTyp; } else { o.type = "other"; o.filetype = "other/"+fileTyp; } return o; } // 初始化上传控件 $(".file-upload").fileinput({ uploadUrl: ctx + 'common/upload', maxFileCount: 1, // 最多上传一个文件 // maxFileSize: 2097152, // 限制文件大小 maxFilePreviewSize: 2097152, // 预览文件的大小 showRemove: false, // 隐藏删除按钮 showUpload: false, // 隐藏上传按钮 showBrowse: false, // 隐藏选择文件按钮 showClose: false, // 隐藏右上角删除 fileActionSettings: { removeClass: 'hideBtn', downloadClass: 'hideBtn', uploadClass: 'hideBtn' }, showCaption: false, //是否显示标题 initialPreviewAsData: true, initialPreviewShowDelete: true, initialPreview: initialPreview, initialPreviewConfig: initialPreviewConfig });
以上是脚本宝典为你收集整理的bootstrap-fileinput上传控件全部内容,希望文章能够帮你解决bootstrap-fileinput上传控件所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。