Bootstrap-FileInput组件的简单Demo
官网:
HTML页面:
引用:
<link href="~/BootstrapComponent/css/fileinput.css" rel="stylesheet" /> <script src="~/BootstrapComponent/js/fileinput.js"></script> <script src="~/BootstrapComponent/js/locales/zh.js"></script>
<!--容器--> <input id="inputFile" type="file" class="file" data-preview-file-type="text" name="file"> <!--JS代码--> <script> //初始化fileinput控件 $("#inputFile").fileinput({ language: 'zh', autoReplace: false, maxFileCount: 1, allowedFileExtensions: ["jpg", "png", "gif"], browseClass: "btn btn-primary", //按钮样式 previewFileIcon: "<i class='glyphicon glyphicon-king'></i>" }); </script>
fileinput.js文件参数修改:
$.fn.fileinput.defaults = {
language: 'en',
showCaption: true,
showBrowse: true,
showPreview: true,
showRemove: true,
showUpload: false, //若为同步提交,无需显示组件的上传按钮
showCancel: true,
showClose: true,
...
}
MVC控制器:
/// <summary> /// MVC文件上传后台方法 /// </summary> /// <returns></returns> public JsonResult FileUpload() { string text = "位置错误!"; bool isSuccess = false; var files = Request.Files; if (files != null && files.Count > 0) { try { var file = files[0]; var fileName = file.FileName; var filePath = Path.Combine(HttpRuntime.AppDomainAppPath, "image", fileName); //绝对路径 file.SaveAs(filePath); isSuccess = true; text = "上传成功!"; } catch (Exception e) { text = e.Message; } } return Json(new { Success = isSuccess, Message = text }, JsonRequestBehavior.AllowGet); }
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 现代计算机视觉入门之:什么是图片特征编码
· .NET 9 new features-C#13新的锁类型和语义
· Spring AI + Ollama 实现 deepseek-r1 的API服务和调用
· 《HelloGitHub》第 106 期
· 数据库服务器 SQL Server 版本升级公告
· 深入理解Mybatis分库分表执行原理
· 使用 Dify + LLM 构建精确任务处理应用