Bootstrap使用fileinput组件上传实例教程-js教程-网页制作-壹聚教程网Bootstrap使用fileinput组件上传实例教程
Bootstrap是Twitter推出的一个用于前端开发的开源工具包。本文我们来看看使用Bootstrap的文件上传组件：bootstrap fileinput使用实例教程。
一、效果展示1、原始的input type='file'，简直不忍直视。2、不做任何装饰的bootstrap fileinput：(bootstrap fileinput初级进化)3、bootstrap fileinput高级进化：中文化、可拖拽上传、文件扩展名校验(如果不是需要的文件，不让上传)拖拽上传上传中4、bootstrap fileinput究极进化：允许同时多线程上传多个文件。上传中上传完成后二、代码示例1、cshtml页面首先引入需要的js和css文件。　　　　　　& //bootstrap fileinput&&&&&&&&&&& bundles.Add(new ScriptBundle(&~/Content/bootstrap-fileinput/js&).Include(&&&&&&&&&&&&&&&&&&&&&&& &~/Content/bootstrap-fileinput/js/fileinput.min.js&,&&&&&&&&&&&&&&&&&&&&&&& &~/Content/bootstrap-fileinput/js/fileinput_locale_zh.js&));&&&&&&&&&&& bundles.Add(new StyleBundle(&~/Content/bootstrap-fileinput/css&).Include(&&&&&&&&&&&&&&&&&&&&&&& &~/Content/bootstrap-fileinput/css/fileinput.min.css&));@Scripts.Render(&~/Content/bootstrap-fileinput/js&)@Styles.Render(&~/Content/bootstrap-fileinput/css&)然后定义input type='file'标签&form&&&& &div class=&modal fade& id=&myModal& tabindex=&-1& role=&dialog& aria-labelledby=&myModalLabel&&&&&&&&& &div class=&modal-dialog modal-lg& role=&document&&&&&&&&&&&&& &div class=&modal-content&&&&&&&&&&&&&&&&& &div class=&modal-header&&&&&&&&&&&&&&&&&&&&& &button type=&button& class=&close& data-dismiss=&modal& aria-label=&Close&&&span aria-hidden=&true&&&&/span&&/button&&&&&&&&&&&&&&&&&&&& &h4 class=&modal-title& id=&myModalLabel&&请选择Excel文件&/h4&&&&&&&&&&&&&&&& &/div&&&&&&&&&&&&&&&& &div class=&modal-body&&&&&&&&&&&&&&&&&&&&& &a href=&~/Data/ExcelTemplate/Order.xlsx& class=&form-control& style=&border:&&下载导入模板&/a&&&&&&&&&&&&&&&&&&&& &input type=&file& name=&txt_file& id=&txt_file& multiple class=&file-loading& /&&&&&&&&&&&&&&&& &/div&&/div&&&&&&&& &/div&&&& &/div&&/form&重点看这一句：&input type=&file& name=&txt_file& id=&txt_file& multiple class=&file-loading& /&multiple表示允许同时上传多个文件，class=“file-loading”表示标签的样式。2、js初始化$(function () {&&& //0.初始化fileinput&&& var oFileInput = new FileInput();&&& oFileInput.Init(&txt_file&, &/api/OrderApi/ImportOrder&);});//初始化fileinputvar 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: 10, //表示允许同时上传的最大文件个数&&&&&&& 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) {&&&&&&& $(&#myModal&).modal(&hide&);&&&&&&& var data = data.response.lstOrderI&&&&&&& if (data == ) {&&&&&&&&&&& toastr.error('文件格式类型不正确');&&&&&&&&&&&&&&&&&& }&&&&&&& //1.初始化表格&&&&&&& var oTable = new TableInit();&&&&&&& oTable.Init(data);&&&&&&& $(&#div_startimport&).show();&&& });}&&& return oF};说明：（1）fileinput()方法里面传入的是一个json数据，它里面有很多属性，每个属性代表着初始化上传控件的时候的特性，如果这些属性都不设置，则表示使用默认的设置。如果园友们想看看它里面有哪些属性，可以打开fileinput.js的源码，在它的最后如图：这些属性如果不特意设置，就会使用默认值。（2）$(&#txt_file&).on(&fileuploaded&, function (event, data, previewId, index) {}这个方法注册上传完成后的回调事件。也就是后天处理上传的文件之后进入这个方法里面处理。3、后台C#对应的方法&还记得在js里面初始化控件方法fileinput()里面有一个参数url吗，这个url对应的值就指示C#后天对应的处理方法。还是贴出后台的处理方法。　　　　 [ActionName(&ImportOrder&)]&&&&&&& public object ImportOrder()&&&&&&& {&&&&&&&&&&& var oFile = HttpContext.Current.Request.Files[&txt_file&];&&&&&&&&&&& var lstOrderImport = new List&DTO_TO_ORDER_IMPORT&();&&&&&&&&&&& #region 0.数据准备&&&&&&&&&&& var lstExistOrder = orderManager.Find();&&&&&&&&&&& var lstOrderNo = lstExistOrder.Select(x =& x.ORDER_NO).ToList();&&&&&&&&&&& var lstTmModel = modelManager.Find();&&&&&&&&&&& var lstTmMaterial = materialManager.Find();&&&&&&&&&&& //var iMax_Import_Index = lstExistOrder.Max(x =& x.IMPORT_INDEX);&&&&&&&&&&& //iMax_Import_Index = iMax_Import_Index == null ? 0 : iMax_Import_Index.V&&&&&&&&&&& #endregion&&&&&&&&&&& #region 1.通过Stream得到Workbook对象&&&&&&&&&&& IWorkbook workbook =&&&&&&&&&&& if (oFile.FileName.EndsWith(&.xls&))&&&&&&&&&&& {&&&&&&&&&&&&&&& workbook = new HSSFWorkbook(oFile.InputStream);&&&&&&&&&&& }&&&&&&&&&&& else if(oFile.FileName.EndsWith(&.xlsx&))&&&&&&&&&&& {&&&&&&&&&&&&&&& workbook = new XSSFWorkbook(oFile.InputStream);&&&&&&&&&&& }&&&&&&&&&&& if (workbook == null)&&&&&&&&&&& {&&&&&&&&&&&&&&& return new { };&&&&&&&&&&& }&&&&&&&&&&& //...............处理excel的逻辑&&&&&&&&&&& //orderManager.Add(lstOrder);&&&&&&&&&&& lstOrderImport = lstOrderImport.OrderBy(x =& x.IMPORT_STATU).ToList();&&&&&&&&&&& return new { lstOrderImport = lstOrderImport };&&&&&&& }由于博主的项目是上传excel，所以这里用是用的NPOI的逻辑，如果是上传图片等文件，可以使用GDI去处理图片。4、同时上传多个文件同时上传多个文件的时候，前台会发送多个异步的请求到后台，也就是说，当同时上传三个文件的时候，后台的ImportOrder方法会进入三次。这样就能使用多线程同时去处理三个文件。三、总结关于bootstrap fileinput的基础使用大概就介绍完了，其实就是一个上传的组件，也不存在什么高级用法。重点是把界面做得更加友好，更好的增加用户体验。Bootstrap文件上传插件File Input的使用1、文件上传插件File Input介绍这个插件主页地址是：/file-input，可以从这里看到很多Demo的代码展示：/file-basic-usage-demo。这是一个增强的 HTML5 文件输入控件，是一个 Bootstrap 3.x 的扩展，实现文件上传预览，多文件上传等功能。一般情况下，我们需要引入下面两个文件，插件才能正常使用：bootstrap-fileinput/css/fileinput.min.cssbootstrap-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.刷新表格数据&&&&&&&&&&&&&&&&&&&&&&& showTi(&保存成功&);&&&&&&&&&&&&&&&&&&&&&&& 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.F&&&&&&&&&&&&&&& 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);&&&&&&&&&&&&&&&&&&& }&&&&&&&&&&&&&&& }&&&&&&&&&&& }&&&&&&&&&&&
(Exception ex)&&&&&&&&&&& {&&&&&&&&&&&&&&& result.ErrorMessage = ex.M&&&&&&&&&&& }&&&&&&&&&&& 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-fileinput的吗?求初始化显示图片的方法_问答_ThinkSAAS
有用过bootstrap-fileinput的吗?求初始化显示图片的方法
有用过bootstrap-fileinput的吗?求初始化显示图片的方法
官网上面有一个initialPreview的方法,不知道是我没写对还是其他原因,初始化不能显示图片
我的代码如下:
$('.file').fileinput({
showPreview : true,
showUpload : true,
allowedFileExtensions : ['jpg', 'png','gif'],
initialPreview: [
"&img src='http://xxx/1.png' class='file-preview-image' /&",
"&img src='http://xxx/2.png' class='file-preview-image' /&",
这个插件没用过，但是overflow:scroll不是强制显示滚动条的吗？没用吗？
何必那么麻烦呢, 直接把将来后端会返回给你的数据做为样本, 保存到你站点的目录下, 然后直接请求这个文件,
将来只需要把ajax请求的地址/参数改一下就行了.
假设你目前有一个需要通过 Ajax 从后端获取数据的需求, 请求的URL地址为123.php, 但因为是同时开工的, 后端的代码还没有写好, 但后端已经和你约定好你们之间的数据格式了.
type:"get",
url:"123.php",
dataType:"json",
success: function(data) {
console.log(typeof data, data, data.hello);
那么 按以下方式来进行模拟, 新建一个 123.js的文件(文件名任意),
内容为你们约定好的数据样本(保存时注意文件的编码):
{"ststus":0,"hello":"大家好!!!"}
然后你的ajax中请求123.js 这个文件, 等将来后端做好之后, 将123.js改为123.php即可.
如果是通过JSONP 方式的也是可以的, 举例:
等后端好的时候, 把 jsonpCallback的这个注释掉.
不需要，你可以写一个数据模板当做后台的到的数据使用。当然，如果你非要用nodejs，可以去学习以下nodejs。百度一下就能找到。
完全可以，构建 Mock Server 就可以了。
我最近在撰写一系列的文章，就是为了解决这个问题的：
知乎上也有讨论：
添加你想要问的问题
PHP开发框架
开发工具/编程工具
服务器环境
ThinkSAAS商业授权：
ThinkSAAS为用户提供有偿个性定制开发服务
ThinkSAAS将为商业授权用户提供二次开发指导和技术支持
官方1群：【已满】
让ThinkSAAS更好，把建议拿来。
关注微信，更好学习<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
您的访问请求被拒绝 403 Forbidden - ITeye技术社区
您的访问请求被拒绝
亲爱的会员，您的IP地址所在网段被ITeye拒绝服务，这可能是以下两种情况导致：
一、您所在的网段内有网络爬虫大量抓取ITeye网页，为保证其他人流畅的访问ITeye，该网段被ITeye拒绝
二、您通过某个代理服务器访问ITeye网站，该代理服务器被网络爬虫利用，大量抓取ITeye网页
请您点击按钮解除封锁&你的浏览器禁用了JavaScript, 请开启后刷新浏览器获得更好的体验!
插件，实现拖拽上传文件。后端用的 laravel5的文件系统。
现在已经能实现文件上传功能，但是无法返回成功信息或者失败信息。
用尽了各种办法也没法吧 Request的值给返回，而且看log信息也找不出问题在哪儿，感觉不会再爱了。
贴代码：注意代码加粗部分
Controller 代码
* @param Request $request
* @return array
* @name Store Input File
public function store(Request $request){
if($request->hasFile('fileinput')){
//Check if Folder exists
$folderName = date('Ymd');
if(!Storage::disk('local')->exists($folderName))
{Storage::makeDirectory($folderName);}
//Get input File
$file = $request->file('fileinput');
//Check Validation
$fileName = $file->getClientOriginalName();
if(!$file->isValid()){return [$fileName => 'success'];}
//Save it to Folder
Storage::disk('local')->put($fileName,$file);
Storage::move($fileName,$folderName.'/'.$fileName);
//return response
echo ['data' => 'data'];
return ['ERROR:' => 'Oppos can not find file!'];
$('#fileinput').on('filebatchuploadcomplete', function(event, data,
previewId, index) {
var form = data.form, files = data.files, extra = data.extra,
response = data.response, reader = data.
alert(response);
console.log('File uploaded triggered'); });
要回复问题请先或
浏览: 4754
关注: 1 人