前端
<script>
function myInitFileInput(ctrlName, uploadUrl, guid) {
var initialPreviewArry = [];
var initialPreviewConfigArry = [];
$.ajax({
url: "/B_Certificate/getImg",
type: "POST",
dataType: 'json',
async: true,
data: {
guid: guid
},
success: function (data) {
for (var i = 0; i < data.length; i++) {
initialPreviewArry[i] = (data[i].CS_URL);
initialPreviewConfigArry[i] = { caption: data[i].CS_URL.replace("/CertificatePicture/", ""), width: "120px", url: "/B_Certificate/DelImg", key: data[i].CS_URL };
}
$("#file-Portrait").fileinput('destroy');
initFileInput(ctrlName, uploadUrl, guid, initialPreviewArry, initialPreviewConfigArry)
},
});
}
function initFileInput(ctrlName, uploadUrl, guid, initialPreviewArry, initialPreviewConfigArry) {
var control = $('#' + ctrlName);
control.fileinput({
language: 'zh',
uploadUrl: uploadUrl,
allowedFileExtensions: ['jpg', 'png'],
showUpload: false,
showCaption: false,
showRemove: false,
showCaption: false,
browseClass: "btn btn-primary",
previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
maxFileCount: 10,
maxFileSize: 4096,
msgSizeTooLarge: " \"{name}\" 大小为({size} KB) 最大文件大小为 {maxSize} KB.请重新上传!",
uploadAsync: false,
dropZoneEnabled: false,
enctype: 'multipart/form-data',
validateInitialCount: true,
msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}!",
uploadExtraData: {
"guid": guid,
},
fileActionSettings: {
showRemove: true,
showUpload: false,
showDownload: false,
},
previewSettings: {
image: { width: "200px", height: "160px" },
},
overwriteInitial: false,
initialPreviewAsData: true,
initialPreviewFileType: 'image',
purifyHtml: true,
initialPreview: initialPreviewArry,
initialPreviewConfig: initialPreviewConfigArry,
}).on('filesorted', function (e, params) {
}).on('filebatchselected', function (event, files) {
$(control).fileinput('upload');
}).on('filedeleted', function (event, key, data) {
}).on("filebatchuploadsuccess", function (event, data) {
}).on("fileuploaded", function (event, data) {
});
}
</script>
https://plugins.krajee.com/file-preview-management-demo#
https://blog.csdn.net/zzq900503/article/details/73499514?utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2allfirst_rank_v2~rank_v25-1-73499514.nonecase&utm_term=initialpreview%E5%A4%9A%E5%BC%A0%E5%9B%BE%E7%89%87
https://segmentfault.com/a/1190000018477200
https://blog.csdn.net/wkh___/article/details/98059183#上传图片
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Linux glibc自带哈希表的用例及性能测试
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 现代计算机视觉入门之:什么是图片特征编码
· 手把手教你在本地部署DeepSeek R1,搭建web-ui ,建议收藏!
· Spring AI + Ollama 实现 deepseek-r1 的API服务和调用
· 数据库服务器 SQL Server 版本升级公告
· 程序员常用高效实用工具推荐,办公效率提升利器!
· C#/.NET/.NET Core技术前沿周刊 | 第 23 期(2025年1.20-1.26)