前端
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 = ; i < upload.Count; i++)
{
if (upload.Count > )
{
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 > )
{
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(, message, data, true);
}
else
{
return Cgl_Json(, 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 };
}