前端
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); ???????}
bootstrap图片上传控件 ??fileinput
原文地址:https://www.cnblogs.com/leolzi/p/8462001.html