<!DOCTYPE html>
<html>
<head>
<title>文件上傳</title>
<meta charset="utf-8"/>
<link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="bootstrap-3.3.7/css/fileinput.min.css" />
<script src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js/fileinput.min.js"></script>
<script type="text/javascript" src="js/zh.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<form id="form" action="" method="post" enctype="multipart/form-data">
<div class="row form-group">
<div class="panel panel-primary">
<div class="panel-heading" align="center">
<label style="text-align: center;font-size: 18px;">文 件 上 傳</label>
</div>
<div class="panel-body">
<div class="col-sm-12">
<input id="input-id" name="file" multiple type="file" data-show-caption="true">
</div>
</div>
</div>
</div>
</form>
</div>
<script>
$(function () {
initFileInput("input-id");
})
function initFileInput(ctrlName) {
var control = $('#' + ctrlName);
control.fileinput({
language: 'zh', //設置語言
uploadUrl: "", //上傳的地址
allowedFileExtensions: ['jpg', 'gif', 'png','doc','docx','pdf','ppt','pptx','txt'],//接收的文件后綴
maxFilesNum : 5,//上傳最大的文件數量
//uploadExtraData:{"id": 1, "fileName":'123.mp3'},
uploadAsync: true, //默認異步上傳
showUpload: true, //是否顯示上傳按鈕
showRemove : true, //顯示移除按鈕
showPreview : true, //是否顯示預覽
showCaption: false,//是否顯示標題
browseClass: "btn btn-primary", //按鈕樣式
//dropZoneEnabled: true,//是否顯示拖拽區域
//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}！",
}).on('filepreupload', function(event, data, previewId, index) { //上傳中
var form = data.form, files = data.files, extra = data.extra,
response = data.response, reader = data.reader;
console.log('文件正在上傳');
}).on("fileuploaded", function (event, data, previewId, index) { //一個文件上傳成功
console.log('文件上傳成功！'+data.id);
}).on('fileerror', function(event, data, msg) { //一個文件上傳失敗
console.log('文件上傳失敗！'+data.id);
})
}
</script>
</body>
</html>
BootStrap FileInput 插件實現多文件上傳前端功能
免責聲明！
本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。
猜您在找
基於bootstrap的上傳插件fileinput實現ajax異步上傳功能(支持多文件上傳預覽拖拽)
基於bootstrap的fileinput插件實現上傳
bootstrap+fileinput插件實現可預覽上傳照片功能
【Bootstrap】bootstrap-fileinput上傳文件插件
Bootstrap 文件上傳插件 FileInput的使用問題
Jquery插件 bootstrap fileinput 文件上傳工具
bootstrap fileinput文件上傳
基於bootstrap-fileinput實現文件上傳，下載
bootstrap fileInput控件實現多文件拖拽上傳
bootstrap fileinput 上傳文件