基于BootStrap Metronic开发框架经验小结【五】Bootstrap File Input文件上传插件的用法详解

Bootstrap文件上传插件File Input是一个不错的文件上传控件,但是搜索使用到的案例不多,使用的时候,也是一步一个脚印一样摸着石头过河,这个控件在界面呈现上,叫我之前使用过的Uploadify 好看一些,功能也强大些,本文主要基于我自己的框架代码案例,介绍其中文件上传插件File Input的使用。

1、文件上传插件File Input介绍

这个插件主页地址是:http://plugins.krajee.com/file-input,可以从这里看到很多Demo的代码展示:http://plugins.krajee.com/file-basic-usage-demo

这是一个增强的 HTML5 文件输入控件,是一个 Bootstrap 3.x 的扩展,实现文件上传预览,多文件上传等功能。

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

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");

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

2、文件上传插件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: "<i class='glyphicon glyphicon-king'></i>",
  });
}

页面代码里面,我们放置一个文件上传控件,如下代码所示。

 <div class="row" style="height: 500px">
      <input id="file-Portrait1" type="file">
  </div>

这样我们脚本代码的初始化代码如下:

 //初始化fileinput控件(第一次初始化)
      initFileInput("file-Portrait", "/User/EditPortrait");

这样就完成了控件的初始化了,如果我们需要上传文件,那么还需要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: [ //预览图片的设置
          "<img src='" + imageurl + "' class='file-preview-image' alt='肖像图片' title='肖像图片'>",
        ],
      });
    }

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

 /// <summary>
    /// 上传用户头像图片
    /// </summary>
    /// <param name="id">用户的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 class='glyphicon glyphicon-king'></i>",
        msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}!",
      });

以上所述是小编给大家介绍的基于BootStrap Metronic开发框架经验小结【五】Bootstrap File Input文件上传插件的用法详解的相关内容,希望对大家有所帮助,如果大家想了解更多资讯,敬请关注我们网站!

时间: 2016-05-11

Bootstrap文件上传组件之bootstrap fileinput

前言:之前的三篇介绍了下bootstrap的一些常用组件,发现博主对这种扁平化的风格有点着迷了.前两天做一个excel导入的功能,前端使用原始的input type='file'这种标签,效果不忍直视,于是博主下定决心要找一个好看的上传组件换掉它.既然bootstrap开源,那么社区肯定有很多关于它的组件,肯定也有这种常见的上传组件吧.经过一番查找,功夫不负有心人,还是被博主找到了这个组件:bootstrap fileinput.在此记录下,就算做个学习笔记,也给需要使用的朋友提供点方便. Bo

BootStrap fileinput.js文件上传组件实例代码

1.首先我们下载好fileinput插件引入插件 <span style="font-size:14px;"><link type="text/css" rel="stylesheet" href="fileinput/css/fileinput.css" rel="external nofollow" /> <script type="text/javascript

BootStrap Progressbar 实现大文件上传的进度条的实例代码

1.首先实现大文件上传,如果是几兆或者几十兆的文件就用基本的上传方式就可以了,但是如果是大文件上传的话最好是用分片上传的方式.我这里主要是使用在客户端进行分片读取到服务器段,然后保存,到了服务器段读取完了之后将分片数据进行组合. 2.前端代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="UploadTest2.aspx.cs" Inherits="Htm

Bootstrap自定义文件上传下载样式

在平时工作中,文件上传下载功能属于不可或缺的一部分.bootstrap前端样式框架也使用的比较多,现在根据bootstrap强大的样式模板,自定义一种文件下载的样式. 后续会使用spring MVC框架实现文件上传的全部代码,敬请期待. 先看图片示例: 本示例包括下载样本文件样式和上传文件样式. 直接先上代码,最后讲解: <div class="form-group col-md-12 has-feedback" id="file"> <label

BootStrap 实现各种样式的进度条效果

Bootstrap提供了各式各样的进度条效果,下面通过实例代码给大家详细介绍,具体详情如下所示: 看下面的例子: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1&quo

spring MVC + bootstrap实现文件上传示例(带进度条)

最近学习了bootstrap,有结合了spring MVC写了个文件上传的示例,留做笔记,废话不多说,直接上代码 监听器类FileUploadProgressListener.Java package com.gpl.web.listener; import javax.servlet.http.HttpSession; import org.apache.commons.fileupload.ProgressListener; import org.springframework.stereo

BootStrap实现文件上传并带有进度条效果

1.做了一天终于做出来了,在上传成功之后,可以将路径添加到数据库,因为一直在烦恼如何在上传成功之后在将路径添加到数据库,终于弄出来了,太开心了,不得不说bootstrap的强大,之前说ajax不能上传文件,之后想办法,用js写,更改了上传文件按钮的样式,但是没想到bootstrap真的太厉害了,样式还不错,可以预览,图片,限制文件的大小,格式等等,还有进度条. 后台的代码在之前写过了 这只有前台的代码 记得:在验证的时候,尽量用控制台来验证,有的时候你的代码写对了,但是有可能alert不显示 c

Bootstrap fileinput文件上传预览插件使用详解

介绍 通过本文,你可以学习到如何封装或者开发一个前端组件,同时学习Bootstrap-fileinput组件的使用,封装后使用更加简单方便. BaseFile是AdminEAP框架中基于Bootstrap-fileinput的附件上传组件,它支持 支持多文件.在线预览.拖拽上传等功能,封装后BaseFile主要包括以下功能: 弹出窗口的附件上传 当前界面的附件上传 显示附件明细 可编辑的附件明细(删除.预览.不可新增) 关于Bootstrap-fileinput的API文档可参考http://p

JS文件上传神器bootstrap fileinput详解

Bootstrap FileInput插件功能如此强大,完全没有理由不去使用,但是国内很少能找到本插件完整的使用方法,于是本人去其官网翻译了一下英文说明文档放在这里供英文不好的同学勉强查阅.另外附上一段调用方发和servlet端的接收代码,未完待续. 引言: 一个强化的HTML5 文件输入插件,适用于Bootstrap 3.x.本插件对多种类型的文件提供文件预览,并且提供了多选等功能.本插件还提供给你一个简单的方式去安装一个先进的文件选择/上传控制版本去配合Bootstrap CSS3样式.通过

Apache 文件上传与文件下载案例详解

写一个Apache文件上传与文件下载的案例:以供今后学习 web.xml配置如下: <span style="font-family:SimSun;font-size:14px;"><?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns=&

FasfDFS整合Java实现文件上传下载功能实例详解

在上篇文章给大家介绍了FastDFS安装和配置整合Nginx-1.13.3的方法,大家可以点击查看下. 今天使用Java代码实现文件的上传和下载.对此作者提供了Java API支持,下载fastdfs-client-java将源码添加到项目中.或者在Maven项目pom.xml文件中添加依赖 <dependency> <groupId>org.csource</groupId> <artifactId>fastdfs-client-java</arti

Socket+JDBC+IO实现Java文件上传下载器DEMO详解

该demo实现的功能有: 1.用户注册: 注册时输入两次密码,若两次输入不一致,则注册失败,需要重新输入.若用户名被注册过,则提示用户重新输入用户名: 2.用户登录: 需要验证数据库中是否有对应的用户名和密码,若密码输错三次,则终止用户的登录操作: 3.文件上传: 从本地上传文件到文件数据库中 4.文件下载: 从数据库中下载文件到本地 5.文件更新: 根据id可更新数据库中的文件名 6.文件删除: 根据id删除数据库中某一个文件 7.看数据库所有文件; 8.查看文件(根据用户名); 9.查看文件

JavaWeb实现文件上传与下载实例详解

在Web应用程序开发中,文件上传与下载功能是非常常用的功能,下面通过本文给大家介绍JavaWeb实现文件上传与下载实例详解. 对于文件上传,浏览器在上传的过程中是将文件以流的形式提交到服务器端的,如果直接使用Servlet获取上传文件的输入流然后再解析里面的请求参数是比较麻烦,所以一般选择采用apache的开源工具common-fileupload这个文件上传组件.这个common-fileupload上传组件的jar包可以去apache官网上面下载,common-fileupload是依赖于c

AngularJS 文件上传控件 ng-file-upload详解

网上可以找到的 AngularJS 的文件上传控件有两个: angular-file-upload:https://github.com/nervgh/angular-file-upload ng-file-upload:https://github.com/danialfarid/ng-file-upload 这两个非常类似,连js文件的结构都是一样的.核心的js是.min.js,还都有一个-shim.min.js,用来支持上传进度条和上传暂停等高级功能. 按道理讲shim.js应该是可加可不

jQuery文件上传控件 Uploadify 详解

基于jquery的文件上传控件,支持ajax无刷新上传,多个文件同时上传,上传进行进度显示,删除已上传文件. 要求使用jquery1.4或以上版本,flash player 9.0.24以上. 有两个版本,一个用flash,一个是html5.html5的需要付费~所以这里只说flash版本的用法. 官网:http://www.uploadify.com/ 控件截图: 用法: 首先引用下面的文件 <link rel="stylesheet" type="text/css&

Angular2-primeNG文件上传模块FileUpload使用详解

近期在学习使用Angular2做小项目,期间用到很多primeNG的模块. 本系列将结合实战总结angular2-primeNG各个模块的使用经验. 文件上传模块FileUploadModule 首先要在使用该组件的模块内导入文件上传模块 本例中为: admin.module.ts import {FileUploadModule} from 'primeng/primeng'; @NgModule({ imports: [FileUploadModule] }) 在需要使用上传功能的组件的HT

JavaWeb实现文件上传下载功能实例详解

在Web应用系统开发中,文件上传和下载功能是非常常用的功能,今天来讲一下JavaWeb中的文件上传和下载功能的实现. 文件上传概述 1.文件上传的作用 例如网络硬盘!就是用来上传下载文件的. 在智联招聘上填写一个完整的简历还需要上传照片呢. 2.文件上传对页面的要求 上传文件的要求比较多,需要记一下: 必须使用表单,而不能是超链接 表单的method必须是POST,而不能是GET 表单的enctype必须是multipart/form-data 在表单中添加file表单字段,即<input ty