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 }; }