bootstrap图片上传控件 fileinput
前端
1.要引用的js
<link type="text/css" rel="stylesheet" href="~/HContent/css/fileinput.css" /> //-----------样式 <script src="~/HContent/js/fileinput.js"></script> //基本的js
<script src="~/HContent/js/locales/zh.js"></script> //中文js
2.html代码
<div class="col-sm-10"> <div class="file-loading"> <input id="uploadFile" type="file" multiple class="file" data-overwrite-initial="false" data-min-file-count="2"> </div> </div>
3.js代码
$('#uploadFile').fileinput({ language: 'zh', //使用中文 theme: 'fa', showUpload: false, //upload按钮不显示 uploadUrl: '@Url.Action("ImageRecive", "BeadHouse")', //服务器url调用路径 allowedFileExtensions: ['jpg', 'png', 'gif'], //允许的文件格式 overwriteInitial: false, maxFileSize: 1000, //文件最大尺寸 maxFilesNum: 3, //文件最大数量 slugCallback: function (filename) { return filename.replace('(', '_').replace(']', '_'); }, });
js的消息响应处理
$("#uploadFile").on("fileuploaded", function (event, data, previewId, index) { var d = data.response;//接收后台返回的数据 if (d.Code == 1) { var bToObj = JSON.parse(d.Record); if (bToObj[0] != null) { var test = window.location.origin + window.location.pathname; var imgid = bToObj[0]; } } else { $.alert(d.Message); } });
4.C#后台处理
//图片接收后保存
public ActionResult ImageRecive() { string[] extName = { ".jpg", ".gif", ".jpeg", ".png", ".pdf" }; var _directory = HttpContext.Server.MapPath("~/BHImage"); List<string> filenames = new List<string>(); HttpFileCollection upload = System.Web.HttpContext.Current.Request.Files; for (int i = 0; i < upload.Count; i++) { if (upload.Count > 3) { return AjaxFail("限制上传文件数量"); } HttpPostedFileBase file = Request.Files[i]; string ext = Path.GetExtension(file.FileName).ToLower(); if (!extName.Contains(ext)) { return AjaxFail("请上传jpg、gif、jpeg、png、pdf格式文件"); }; if (file.InputStream.Length > 1024000) { return AjaxFail("上传的文件不要超过1M"); } var namefix = System.Guid.NewGuid().ToString() + "_" + System.DateTime.Now.ToString("HHmmss") + Path.GetExtension(file.FileName); string file_name = "/" + namefix; filenames.Add(namefix); file.SaveAs(_directory + file_name); } return AjaxSuccess(filenames.Count.ToString(), filenames); }
5.C#几个基础函数
/// <summary> /// ajax访问,操作成功时返回json /// </summary> /// <param name="message">消息</param> /// <param name="data">数据</param> /// <returns></returns> protected JsonResult AjaxSuccess(string message, object data) { if (data is Object) { return Cgl_Json(1, message, data, true); } else { return Cgl_Json(1, message, data, false); } } /// <summary> /// ajax访问时,返回json /// </summary> /// <param name="code">代码 -1 :未登录,1:成功,0:失败</param> /// <param name="message">消息</param> /// <param name="data">数据</param> /// <param name="isSerialize">是否序列化</param> /// <returns></returns> protected JsonResult Cgl_Json(int code, string message, object data, bool isSerialize) { var jj = new AjaxResult() { Code = code, Message = message, Record = data }; if (isSerialize) { jj.Record = JsonConvert.SerializeObject(jj.Record, Formatting.Indented, new IsoDateTimeConverter() { DateTimeFormat = "yyyy-MM-dd" }); } return new JsonResult() { JsonRequestBehavior = JsonRequestBehavior.AllowGet, Data = jj }; }
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库