Bootstrap Fileinput文件上传组件用法详解
Bootstrap Fileinput是一款基于Bootstrap的文件上传组件，可以方便地进行文件上传并对上传的文件进行一些处理。
安装
下载源码
可以从 Bootstrap Fileinput 的官方 Github 页面下载源码：https://github.com/kartik-v/bootstrap-fileinput。选择最新的稳定版进行下载。
引入文件
将 Bootstrap Fileinput 的相关文件引入到你的项目中。需要引入的文件包括bootstrap.min.css、bootstrap.min.js、fileinput.min.css和fileinput.min.js。
<!-- 引入 CSS 文件 -->
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/bootstrap-fileinput/5.0.9/css/fileinput.min.css" rel="stylesheet">
<!-- 引入 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-fileinput/5.0.9/js/fileinput.min.js"></script>
使用
基本用法
在 HTML 中添加一个文件上传框。使用 <input type="file"> 标签创建一个文件上传框，然后为其添加一个 id。
<input id="input-id" type="file" class="file" data-preview-file-type="text" />
在 JavaScript 中初始化文件上传框。在 $(document).ready(function () {}); 中调用 fileinput() 方法对文件上传框进行初始化。
$(document).ready(function() {
$("#input-id").fileinput({});
});
这样就完成了一个简单的文件上传功能，还可以加入一些选项定制它的功能。其中 data-preview-file-type 选项用来指定文件预览类型。
高级用法
限制文件类型
只允许上传某些特定类型的文件，比如图片和 PDF 文件。可以使用 allowedFileExtensions 选项来指定可上传文件的扩展名。
$(document).ready(function() {
$("#input-id").fileinput({
allowedFileExtensions: ["jpg", "png", "gif", "pdf"]
});
});
限制文件大小
可以使用 maxFileSize 选项来指定最大文件大小（单位为 KB），如果超出限制会有错误提示。
$(document).ready(function() {
$("#input-id").fileinput({
maxFileSize: 2048
});
});
实时预览
可以打开 showPreview 选项来展示图片和 PDF 文档的预览效果。
$(document).ready(function() {
$("#input-id").fileinput({
showPreview: true,
allowedFileExtensions: ["jpg", "png", "gif", "pdf"]
});
});
可以通过 showClose 和 showRemove 选项来定制预览效果的关闭和删除按钮的显示。
$(document).ready(function() {
$("#input-id").fileinput({
showPreview: true,
showClose: true,
showRemove: true,
allowedFileExtensions: ["jpg", "png", "gif", "pdf"]
});
});
示例说明
示例 1
实现单文件上传功能。用户点击上传按钮，弹出文件选择框，选择完成后上传文件。上传成功后显示成功提示，上传失败后显示错误提示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap Fileinput 示例 1</title>
<!-- 引入 CSS 文件 -->
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/bootstrap-fileinput/5.0.9/css/fileinput.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<h1>示例 1</h1>
<form action="upload.php" method="POST" enctype="multipart/form-data">
<input id="input-id" name="file" type="file" class="file">
<button id="upload" type="submit" class="btn btn-primary">上传</button>
</form>
<div id="response"></div>
</div>
<!-- 引入 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-fileinput/5.0.9/js/fileinput.min.js"></script>
<script>
$(document).ready(function() {
$("#input-id").fileinput({});
$("#upload").click(function(e) {
e.preventDefault();
var formData = new FormData();
formData.append('file', $('#input-id')[0].files[0]);
$.ajax({
url: 'upload.php',
type: 'POST',
data: formData,
contentType: false,
processData: false,
success: function(response) {
$("#response").html("<div class='alert alert-success'>"+response+"</div>");
},
error: function(response) {
$("#response").html("<div class='alert alert-danger'>"+response+"</div>");
}
});
});
});
</script>
</body>
</html>
示例 2
展示如何限制文件类型和文件大小。用户点击上传按钮，弹出文件选择框，选择完成后进行文件类型和文件大小的限制，上传成功后显示成功提示，上传失败后显示错误提示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap Fileinput 示例 2</title>
<!-- 引入 CSS 文件 -->
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/bootstrap-fileinput/5.0.9/css/fileinput.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<h1>示例 2</h1>
<form action="upload.php" method="POST" enctype="multipart/form-data">
<input id="input-id" name="file" type="file" class="file">
<button id="upload" type="submit" class="btn btn-primary">上传</button>
</form>
<div id="response"></div>
</div>
<!-- 引入 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-fileinput/5.0.9/js/fileinput.min.js"></script>
<script>
$(document).ready(function() {
$("#input-id").fileinput({
allowedFileExtensions: ["jpg", "png", "gif", "pdf"],
maxFileSize: 2048
});
$("#upload").click(function(e) {
e.preventDefault();
var formData = new FormData();
formData.append('file', $('#input-id')[0].files[0]);
$.ajax({
url: 'upload.php',
type: 'POST',
data: formData,
contentType: false,
processData: false,
success: function(response) {
$("#response").html("<div class='alert alert-success'>"+response+"</div>");
},
error: function(response) {
$("#response").html("<div class='alert alert-danger'>"+response+"</div>");
}
});
});
});
</script>
</body>
</html>
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Bootstrap Fileinput文件上传组件用法详解 - Python技术站
微信扫一扫 
支付宝扫一扫 