Bootstrap File Input 的使用
由于工作需要使用Bootstrap的FileInput插件,在此分享下插件的使用方法
直接上代码
fileinput.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/fileinput.css" />
</head>
<body>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/fileinput.js" ></script>
<script type="text/javascript" src="js/fileinput_locale_zh.js" ></script>
<label class="control-label">Select File</label> <input id="input-2" name="input2" type="file" class="file-loading"> <script type="text/javascript"> var ctrlName = 'input-2';
var control = $('#' + ctrlName); control.fileinput({
uploadUrl:'http://localhost:8080/upload.php',
showCaption: false,
showCancel:false,
showUploadedThumbs:false,
showClose:false,
autoReplace:true,
maxFileCount:1,
overwriteInitial:true,
showUploadedThumbs:false,
language:'zh',
initialPreview:"<img src='/back_t.jpg' class='file-preview-image' />",
initialPreviewCount:1,
initialPreviewShowDelete:false,
layoutTemplates:{
actions: '<div class="file-actions">\n' +
' <div class="file-footer-buttons">\n' +
' </div>\n' +
' <div class="file-upload-indicator" tabindex="-1" title="{indicatorTitle}">{indicator}</div>\n' +
' <div class="clearfix"></div>\n' +
'</div>'
}
}).on('fileuploaded', function(event, data, previewId, index){ console.log(data.response.message); }); </script>
</body> </html>
uploadFile.php
<?php if ($_FILES['input2']["type"] == "image/png") {
echo "{\"code\":0, \"message\":\"upload success!\"}";
} else {
echo "{\"code\":-1, \"error\":\"Invalid file format\"}";
}
?>
使用截图
上传成功
Bootstrap File Input 的使用的更多相关文章
- Bootstrap File Input的简单使用
安装引入 使用前需要引入其css和js文件, 注意引入路径的问题 <link rel="stylesheet" href="/__PUB__/fileinput/c ...
- bootstrap File Input 多文件上传插件使用记录(二)删除原文件
在上一篇文章中,主要介绍了file input插件的初始化和多文件同步上传到服务器的相关配置等.这篇主要介绍file input插件的编辑等. 使用场景: 在后台管理框架中,一条数据中包含不固定的多张 ...
- bootstrap file input 官方文档翻译
file Input官方文档 中文翻译 file input 特性 1.这个插件会把简单的html文件变成一个更好用的文件选择输入控件,通过一个html的文件输入框,能兼容那些不支持jquery或js ...
- Bootstrap File Input 中文文档
手动安装 您也可以手动地安装插件到你的项目中.只要下载源ZIP或TAR球和提取资产(CSS和JS插件文件夹)到你的项目中. 使用 步骤1:在你页面头部加载以下类库. <link href=&qu ...
- bootstrap file input 多图片上传编辑THINKPHP5
{layout name="layout" title="文章添加" /} <form id="defaultForm" role=& ...
- 基于Metronic的Bootstrap开发框架经验总结(5)--Bootstrap文件上传插件File Input的使用
Bootstrap文件上传插件File Input是一个不错的文件上传控件,但是搜索使用到的案例不多,使用的时候,也是一步一个脚印一样摸着石头过河,这个控件在界面呈现上,叫我之前使用过的Uploadi ...
- Bootstrap文件上传插件File Input的使用
基于Metronic的Bootstrap开发框架经验总结(5)--Bootstrap文件上传插件File Input的使用 Bootstrap文件上传插件File Input是一个不错的文件上传控件, ...
- (转)基于Metronic的Bootstrap开发框架经验总结(5)--Bootstrap文件上传插件File Input的使用
http://www.cnblogs.com/wuhuacong/p/4774396.html Bootstrap文件上传插件File Input是一个不错的文件上传控件,但是搜索使用到的案例不多,使 ...
- File Input Features
文件输入功能 1.该插件将将一个简单的 HTML 文件输入转换为高级文件选取器控件.将有助于对不支持 JQuery 或 Javascript 的浏览器的正常 HTML 文件输入进行回退. 2.文件输入 ...
随机推荐
- ASP.NET MVC 实现页落网资源分享网站+充值管理+后台管理(10)之素材管理
源码下载地址:http://www.yealuo.com/Sccnn/Detail?KeyValue=c891ffae-7441-4afb-9a75-c5fe000e3d1c 素材管理模块也是我们这个 ...
- Linux 内核同步 urb
不幸的是, 同步 urb 没有一个象中断, 控制, 和块 urb 的初始化函数. 因此它们必须在 驱动中"手动"初始化, 在它们可被提交给 USB 核心之前. 下面是一个如何正确初 ...
- CF1169(div2)题解报告
CF1169(div2)题解报告 A 不管 B 首先可以证明,如果存在解 其中必定有一个数的出现次数大于等于\(\frac{m}{2}\) 暴力枚举所有出现次数大于等于$\frac{m}{2} $的数 ...
- 关于C#异步编程你应该了解的几点建议
前段时间写了一篇关于C#异步编程入门的文章,你可以点击<C#异步编程入门看这篇就够了>查看.这篇文章我们来讨论下关于C#异步编程几个不成文的建议,希望对你写出高性能的异步编程代码有所帮助. ...
- pytorch中DataLoader, DataSet, Sampler之间的关系
转自:https://mp.weixin.qq.com/s/RTv0cUWvc0kuXBeNoXVu_A 自上而下理解三者关系 首先我们看一下DataLoader.__next__的源代码长什么样,为 ...
- 0019 盒子模型(CSS重点):边框、内外边距、布局稳定性、PS
typora-copy-images-to: media 第01阶段.前端基础.盒子模型 盒子模型(CSS重点) css学习三大重点: css 盒子模型 . 浮动 . 定位 主题思路: 目标: 理解: ...
- 使用PAC file结合ATS控制访问
介绍:前面已经介绍了ATS的安装和PAC文件的写法格式,现在把nginx端口转发,pac file访问控制和ATS代理结合起来分别控制不同的机器访问不同URL权限的目的 效果如下 一.使用nginx端 ...
- Flink State Backends (状态后端)
State Backends 的作用 有状态的流计算是Flink的一大特点,状态本质上是数据,数据是需要维护的,例如数据库就是维护数据的一种解决方案.State Backends 的作用就是用来维护S ...
- 嗨,让我带你逐行剖析Vue.js源码
本项目受到了阮一峰老师的肯定,已刊登在阮一峰老师微信公众号的科技爱好者周刊第87期,同时也被多个微博大V转发,短短一个月时间内在github上star数量就已经突破2k! Hello,大家好,我最近在 ...
- 洛谷$P5444\ [APIO2019]$奇怪装置 数论
正解:数论 解题报告: 传送门$QwQ$ 我好像当初考的时候这题爆零了,,,部分分都没想到,,,我真的好菜$kk$ 考虑如果在$t_1,t_2$两个时刻有$x_1=x_2,y_1=y_2$是什么情况$ ...