JS文件上传神器bootstrap fileinput详解

前面我们看到，我上传的地址为："/User/EditPortrait"，这个后台的函数我也公布一下，希望给大家一个完整的案例代码学习。

/// lt;summarygt;
 /// 上传用户头像图片
 /// lt;/summarygt;
 /// lt;param name="id"gt;用户的IDlt;/paramgt;
 /// lt;returnsgt;lt;/returnsgt;
 public ActionResult EditPortrait(int id)
 {
 CommonResult result = new CommonResult();
 try
 {
 var files = Request.Files;
 if (files != null  files.Count gt; 0)
 {
 UserInfo info = BLLFactorylt;Usergt;.Instance.FindByID(id);
 if (info != null)
 {
 var fileData = ReadFileBytes(files[0]);
 result.Success = BLLFactorylt;Usergt;.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: "lt;i class='glyphicon glyphicon-king'gt;lt;/igt;", 
 msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
 });

源码下载：Bootstrap FileInput文件上传组件

本文已被整理到了《javascript文件上传操作汇总》，欢迎大家学习阅读。

如果大家还想深入学习，可以点击这里进行学习，再为大家附两个精彩的专题：Bootstrap学习教程 Bootstrap实战教程

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

（编辑：南平站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!