Bootstrap 图片上传入门
导入图片上传 css js
**下载地址 :**https://github.com/kartik-v/bootstrap-fileinput
这里我们先放一个 图片控件 再放一个点击修改头像Button
<img style="width:100px;height:100px" id="imgEmdImg" class="img-circle">
<button type="button" id="btnImg" class="btn btn-default" data-dismiss="modal">修改头像</button>
初始化 fileinput
var EmImg = ""; //定义初始头像 我这里定义为空
//初始化fileinput
var FileInput = function () {
var oFile = new Object();
//初始化fileinput控件(第一次初始化)
oFile.Init = function (ctrlName, uploadUrl) {
var control = $('#' + ctrlName);
//初始化上传控件的样式
control.fileinput({
language: 'zh', //设置语言
uploadUrl: uploadUrl, //上传的地址
allowedFileExtensions: ['jpg', 'gif', 'png'],//接收的文件后缀
showUpload: true, //是否显示上传按钮
showCaption: false,//是否显示标题
browseClass: "btn btn-primary", //按钮样式
//dropZoneEnabled: false,//是否显示拖拽区域
//minImageWidth: 50, //图片的最小宽度
//minImageHeight: 50,//图片的最小高度
//maxImageWidth: 1000,//图片的最大宽度
//maxImageHeight: 1000,//图片的最大高度
//maxFileSize: 0,//单位为kb,如果为0表示不限制文件大小
//minFileCount: 0,
maxFileCount: 1, //表示允许同时上传的最大文件个数
enctype: 'multipart/form-data',
validateInitialCount: true,
previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}!",
});
//导入文件上传完成之后的事件
$("#txt_file").on("fileuploaded", function (event, data, previewId, index) {
var data = data.response;
var last = data.lastIndexOf("Upload");
EmImg = data.substring(last + 7);
//document.getElementById('videoForm').outerHtml = document.getElementById('videoForm').outerHtml;
//document.getElementById("videoForm").reset();
$("#Modal").modal('hide');
$("#imgEmdImg").attr("src", "../FileUpload/Upload/" + EmImg);
//alert(EmImg);
1.初始化表格
//var oTable = new TableInit();
//oTable.Init(data);
});
}
return oFile;
};
写好弹出模态
</div>
<div class="modal-body">
<from id="videoForm">
<input id="txt_file" type="file">
</from>
</div>
@*<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
关闭
</button>
<button id="btnClose" type="button" class="btn btn-primary">
返回
</button>
</div>*@
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
弹出修改头像模态
//上传头像
var oFileInput = new FileInput();
oFileInput.Init("txt_file", "/Employee/UploadFile"); **注意:这里是导入地址写好你的控制器 和方法名**
//弹出添加图片模态
$("#btnImg").click(function () {
$("#Modal").modal("show");
});
开始写控制器里的方法 这里 string path = Server.MapPath("~/FileUpload/Upload/") + file.FileName; 中~/FileUpload/Upload/为你项目中所保存的图片文件路径 文件夹名字即可
#region 图片上传
/// <summary>
/// 上传用户头像图片
/// </summary>
/// <param name="id">用户的ID</param>
/// <returns></returns>
public JsonResult UploadFile()
{
HttpPostedFileBase file = Request.Files[0];
string path = Server.MapPath("~/FileUpload/Upload/") + file.FileName;
if (file.FileName.EndsWith(".jpg") || file.FileName.EndsWith(".gif") || file.FileName.EndsWith(".png"))
{
file.SaveAs(path);
return Json(path);
}
else
{
return Json("no");
}
}
#endregion
这样头像也就上传成功了
博主才疏学浅 如有大佬看见 请多多见谅!
如有问题疑惑可联系 qq:1580551707 请备注 谢谢!