全国网帮你
当前位置: 全国 > 全国商务服务 > 全国软件开发

bootstrap+fileinput例子-设置不自动刷新可以吗?

  • 2025-03-15 02:30:01
  • 140
  • 信息编号:2013190159
  • 提供服务:网站建设/维护、系统/软件开发、网站设计、其他
  • 类别:应用软件
  • 所在区域:全国
  • 详细地址:云约CRM
  • 联系电话:查看联系方式
  • 联系时,请一定说明在网帮你(93580.com.cn)看到的,谢谢!,请勿向陌生人打款,见面最安全,发现问题请举报。
详细信息
咨询留言
咨询主题:
咨询内容:
     
注意:留言请先登陆,并且已绑定微信,否则无法收发留言!

bootstrap file input设置不自动刷新可以吗?

答:不可以,

在我的开发中官方也没有这样的API,所以不可以,在ajax上传文件时直接将文件名插入数据库。如要一起和表单数据一起提交会有BUG,所以赞成不这样做。最好是数据和文件分开上传。

bootstrap file input下载https://github.com/kartik-v/bootstrap-fileinput

file input插件功能如此强大,样式非常美观,并且支持上传文件预览,ajax同步或异步上传,拖曳文件上传等炫酷的功能,完全没有理由不去使用,但是国内很少能找到本插件完整的使用方法,于是本人去其官网翻译了一下英文说明文档放在这里供英文不好的同学勉强查阅。另外附上一段调用方发和servlet端的接收代码,未完待续。


引言:

一个强化的HTML5 文件输入插件,适用于Bootstrap 3.x。本插件对多种类型的文件提供文件预览,并且提供了多选等功能。本插件还提供给你一个简单的方式去安装一个先进的文件选择/上传控制版本去配合Bootstrap CSS3样式。通过对很多种文件提供预览支持,比如图片,文本,html,视频,声音,flash和对象,它大大增强了文件输入的功能。另外,它还包含基于AJAX的上传,拖拽,移除文件的功能,可视化的上传进度条,和可选择的添加或删除文件预览功能。

提示:本插件致力于使用大量在添加jquery下的css3和html5功能,强调:你可能会发现css3或html5或它两个的混合在许多实现中被需要。

本插件最早受一篇博文和Jasny'sFile Input plugin启发。但是本插件现在已经添加的好多功能和强化,为开发者提供了一个成熟并且完整的文件管理工具和解决方案。


伴随着4.0.0版本的发布,本插件现在支持被多种现代化浏览器支持的,基于Ajax,利用html5 Formdata和XHR2协议的上传。而且她也拥有了对在服务器端基于AJAX的文件删除原生内置支持。因此它可以添加更加强大的功能,联机添加、移除文件。本插件也对大多数现代浏览器添加了拖拉,移除支持。它也已经为Ajax上传提供原生支持。万一,浏览器不支持FormData或XHR2,本插件会降级成一个普通表单。

文件上传插件File Input介绍

一般情况下,我们需要引入下面两个文件,插件才能正常使用:

bootstrap-fileinput/css/fileinput.min.css
bootstrap-fileinput/js/fileinput.min.js

简单的界面效果和众多上传文件控件一样,可以接受各种类型的文件。当然,我们也可以指定具体接受的文件类型等功能。

如果需要考虑中文化,那么还需要引入文件:

bootstrap-fileinput/js/fileinput_locale_zh.js

这样基于MVC的Bundles集合,我们把它们所需要的文件加入到集合里面即可。

//添加对bootstrap-fileinput控件的支持
css_metronic.Include("~/Content/MyPlugins/bootstrap-fileinput/css/fileinput.min.css");
js_metronic.Include("~/Content/MyPlugins/bootstrap-fileinput/js/fileinput.min.js");
js_metronic.Include("~/Content/MyPlugins/bootstrap-fileinput/js/fileinput_locale_zh.js");

这样我们在页面里面,就可以呈现出中文的界面说明和提示了

文件上传插件File Input的使用

一般情况下,我们可以定义一个JS的通用函数,用来初始化这个插件控件的,如下JS的函数代码所示。

//初始化fileinput控件(第一次初始化)
function initFileInput(ctrlName, uploadUrl) {  
  var control = $('#' + ctrlName);
  control.fileinput({
      language: 'zh', //设置语言
      uploadUrl: uploadUrl, //上传的地址
      allowedFileExtensions : ['jpg', 'png','gif'],//接收的文件后缀
      showUpload: false, //是否显示上传按钮
      showCaption: false,//是否显示标题
      browseClass: "btn btn-primary", //按钮样式        
      previewFileIcon: "

这样就完成了控件的初始化了,如果我们需要上传文件,那么还需要JS的代码处理客户端上传的事件,同时也需要MVC后台控制器处理文件的保存操作。

例如我对窗体数据的保存处理代码如下所示。

//添加记录的窗体处理
        formValidate("ffAdd", function (form) {
          $("#add").modal("hide");
          //构造参数发送给后台
          var postData = $("#ffAdd").serializeArray();
          $.post(url, postData, function (json) {
              var data = $.parseJSON(json);
              if (data.Success) {
                //增加肖像的上传处理
                initPortrait(data.Data1);//使用写入的ID进行更新
                $('#file-Portrait').fileinput('upload');
                //保存成功 1.关闭弹出层,2.刷新表格数据
                showTips("保存成功");
                Refresh();
              }
              else {
                showError("保存失败:" + data.ErrorMessage, 3000);
              }
          }).error(function () {
              showTips("您未被授权使用该功能,请联系管理员进行处理。");
          });
        });

其中我们注意到文件保存的处理逻辑代码部分:

//增加肖像的上传处理
initPortrait(data.Data1);//使用写入的ID进行更新
$('#file-Portrait').fileinput('upload');

第一行代码就是重新构建上传的附加内容,如用户的ID信息等,这样我们就可以根据这些ID来构建一些额外的数据给后台上传处理了。

这个函数主要就是重新给ID赋值,方便上传的时候,获取最新的附加参数,这个和Uploadify的处理模式一样的。

//初始化图像信息
      function initPortrait(ctrlName, id) {
        var control = $('#' + ctrlName);
        var imageurl = '/PictureAlbum/GetPortrait?id=' + id + '&r=' + Math.random();
        //重要,需要更新控件的附加参数内容,以及图片初始化显示
        control.fileinput('refresh', {
          uploadExtraData: { id: id },
          initialPreview: [ //预览图片的设置
              "肖像图片",
          ],
        });
      }

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

///


      /// 上传用户头像图片
      ///
      /// 用户的ID
      ///       {
        CommonResult result = new CommonResult();
        try
        {
          var files = Request.Files;
          if (files != null && files.Count > 0)
          {
              UserInfo info = BLLFactory.Instance.FindByID(id);
              if (info != null)
              {
                var fileData = ReadFileBytes(files[0]);
                result.Success = BLLFactory.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: "         });
推荐搜索:
nbsp #39 文件 上传 插件 处理 我们 功能 保存 支持 需要 初始化 使用 var id 控件 一个 添加 代码 这样 + ID 图片 提供 js bootstrap-fileinput 预览 function 数据 用户 肖像 显示 可以 后台 基于 里面 设置 样式 fileinput uploadUrl ctrlName 按钮 这个 函数 构建 是否 false 更新 进行 if 接收 多种 类型 files #file-Portrait .fileinput 用来 附加 JS MyPlugins initPortrait Content 信息 浏览器 metronic.Include html5 Input 地址 css 并且 input 完整 集合 提示 XHR2 删除 css3 locale 引入 zh.js MVC 情况下 窗体 记录 但是 就可以 原生 AJAX 一般 那么 写入 File data.Data1 参数 现在 已经 刷新 bootstrap json 内容 逻辑 fileinput.min.js 就是 重新 界面 一样 接受 如果 Ajax postData 两个 所以 正常 一些 增加 当然 也可以 操作 control.fileinput language zh 语言 # 强化 表单 一起 btn control 数据库 另外 说明 标题 英文 一下 showCaption browseClass showUpload jpg allowedFileExtensions png gif 后缀 输入 btn-primary 版本 showTips null upload 0 file 不可以 ajax CommonResult result 同时 成功 第一次 previewFileIcon Bootstrap 如下 所示 info 简单 fileData 我的 开发 1. data.Success 没有 官方 .modal 我对 例如 formValidate ffAdd form 控制器 事件 成了 客户端 #add 关闭 .post .serializeArray url data .parseJSON #ffAdd 送给 hide 构造 数发 API 其中 try new 头像 学习 Request.Files files.Count result.Success ReadFileBytes BLLFactory.Instance.FindByID UserInfo 案例 大家 看到 前面 initialPreview uploadExtraData User 希望 公布 我也 EditPortrait BLLFactory.Instance.UpdatePersonImageBytes UserImageType. Upload FileUpload 相册 除了 maxFileCount 100 true form-data multipart enctype 必备 系统 ex Exception catch 个人 result.ErrorMessage ex.Message 面的 ToJsonContent return refresh 以及 联系 授权 管理员 直接 一行 部分 注意到 未被 Refresh 表格 2. else showError .error 3000 data.ErrorMessage 失败 图像 模式 Uploadify 新的 imageurl PictureAlbum 重要 Math.random r GetPortrait 获取 这些 根据 自动 额外 主要 时候 方便 赋值 弹出 定义 可选择 进度 可视化 完全 致力于 下的 jquery 大量 有理由 对象 flash 声音 大大 增强 拖拽 不去 包含 炫酷 强调 异步 Jasny 博文 一篇 sFile 同步 好多 启发 plugin 最早 发现 可能 合在 拖曳 实现 许多 视频 html servlet 方发 调用 一段 去其 本人 于是 引言 未完待续 附上 查阅 文档 官网 在这里 勉强 同学 好的 HTML5 适用于 CSS3 配合 控制 选择 通过 文本 国内 比如 先进 安装 找到 使用方法 3.x 多选 方式 给你 很少 功能和 开发者 它们 Bundles kartik-v 所需 要的 即可 github.com 加入 中文化 考虑 效果 如此 fileinput.min.cssbootstrap-fileinput 众多 bootstrap-fileinputfile 具体 指定 各种 https 下载 会有 BUG 赞成 这样做 initFileInput 提交 文件名 插入 最好 通用 页面 fileinput.min.css 分开 现出 翻译 中文 强大 才能 她也 而且 协议 Formdata 有了 内置 服务器 对在 利用 美观 解决方案 管理工具 成熟 随着 现代化 发布 4.0.0 因此 降级 FormData 不支持 普通 下面 非常 介绍 万一 拖拉 联机 大的 加强 也对 大多数 加了 现代
该栏目的其他信息
赞助商广告

会员认证会员

(pce****)

请使用网帮你微信扫码登录