//初始化图像信息 function initPortrait(ctrlName, id) { var control = $('#' + ctrlName); var imageurl = '/PictureAlbum/GetPortrait?id=' + id + '&r=' + Math.random(); //重要，需要更新控件的附加参数内容，以及图片初始化显示 control.fileinput('refresh', { uploadExtraData: { id: id }, initialPreview: [ //预览图片的设置 "<img src='" + imageurl + "' alt='肖像图片' title='肖像图片'>", ], }); }
前面我们看到，我上传的地址为："/User/EditPortrait"，这个后台的函数我也公布一下，希望给大家一个完整的案例代码学习。
/// <summary> /// 上传用户头像图片 /// </summary> /// <param>用户的ID</param> /// <returns></returns> public ActionResult EditPortrait(int id) { CommonResult result = new CommonResult(); try { var files = Request.Files; if (files != null && files.Count > 0) { UserInfo info = BLLFactory<User>.Instance.FindByID(id); if (info != null) { var fileData = ReadFileBytes(files[0]); result.Success = BLLFactory<User>.Instance.UpdatePersonImageBytes(UserImageType.个人肖像, id, fileData); } } } catch (Exception ex) { result.ErrorMessage = ex.Message; } return ToJsonContent(result); }
这样我们就构建了上面的用户肖像的保存处理逻辑了，文件可以正常的保存到后台的文件系统里面，同时数据库里面记录一些必备的信息。
当然，除了用来处理用户的肖像图片，我们也可以用来构建图片相册的处理操作的。
//初始化fileinput控件（第一次初始化） $('#file-Portrait').fileinput({ language: 'zh', //设置语言 uploadUrl: "/FileUpload/Upload", //上传的地址 allowedFileExtensions : ['jpg', 'png','gif'],//接收的文件后缀, maxFileCount: 100, enctype: 'multipart/form-data', showUpload: true, //是否显示上传按钮 showCaption: false,//是否显示标题 browseClass: "btn btn-primary", //按钮样式 previewFileIcon: "<i></i>", msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！", });
源码下载：Bootstrap FileInput文件上传组件
本文已被整理到了《javascript文件上传操作汇总》，《ajax上传技术汇总》欢迎大家学习阅读。
如果大家还想深入学习，可以点击这里进行学习，再为大家附两个精彩的专题：Bootstrap学习教程 Bootstrap实战教程