Bootstrap File Input 的使用
2016-02-07 09:07
591 查看
由于工作需要使用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/uploadFile.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){});
</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\"}";
}
?>
成功返回upload success!
我的个人主页521100.net
直接上代码
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/uploadFile.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){});
</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\"}";
}
?>
成功返回upload success!
我的个人主页521100.net
相关文章推荐
- python使用fileinput模块实现逐行读取文件的方法
- Python fileinput模块使用实例
- Python中的fileinput模块的简单实用示例
- Python fileinput模块使用介绍
- Python使用os模块和fileinput模块来操作文件目录
- bootstrap fileinput 文件上传
- 源码分析Hadoop FileInputFormat如何分片
- Bootstrap fileinput.js,最好用的文件上传组件
- 留言板——列表分页
- 开源-boostrap单页Web
- Bootstrap文件(图片)上传插件File Input进阶使用说明
- python fileinput 模块替换文件全局内容
- 留言板——提交界面
- python 多文件列相加
- boostrap中模态窗口的学习与总结
- Java IO流(第三讲):字节流中的FileInputStream与FileoutputStream
- j2se学习中的一些零碎知识点7之流
- Bootstrapvalidator表单验证+ 模态框 Ajax请求 Demo
- 【BootStrap】图片样式、辅助类样式和CSS组件 -附源码
- bootstrap fileinput 完整例子(有后台java版)