<!--
* bootstrap-fileinput v5.5.0
* http://plugins.krajee.com/file-input
*
* Author: Kartik Visweswaran
* Copyright: 2014 - 2022, Kartik Visweswaran, Krajee.com
*
* Licensed under the BSD-3-Clause
* https://github.com/kartik-v/bootstrap-fileinput/blob/master/LICENSE.md
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Krajee JQuery Plugins - Bootstrap 5.x - © Kartik</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.min.css" crossorigin="anonymous">
<link href="../css/fileinput.css" media="all" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" crossorigin="anonymous">
<link href="../themes/explorer-fa5/theme.css" media="all" rel="stylesheet" type="text/css"/>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" crossorigin="anonymous"></script>
<script src="../js/plugins/buffer.min.js" type="text/javascript"></script>
<script src="../js/plugins/filetype.min.js" type="text/javascript"></script>
<script src="../js/plugins/piexif.js" type="text/javascript"></script>
<script src="../js/plugins/sortable.js" type="text/javascript"></script>
</head>
<body>
<div class="container my-4">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
<script src="../js/fileinput.js" type="text/javascript"></script>
<script src="../js/locales/fr.js" type="text/javascript"></script>
<script src="../js/locales/es.js" type="text/javascript"></script>
<script src="../themes/fa5/theme.js" type="text/javascript"></script>
<script src="../themes/explorer-fa5/theme.js" type="text/javascript"></script>
<h1>Bootstrap File Input Examples
<small><a href="https://github.com/kartik-v/bootstrap-fileinput-samples"><i
class="fas fa-download"></i> Download Sample Files</a></small>
</h1>
<h4>Bootstrap Version: <script>document.write($.fn.fileinputBsVersion);</script></h4>
<hr>
<form enctype="multipart/form-data">
<div class="file-loading">
<input id="kv-explorer" type="file" multiple>
</div>
<br>
<div class="file-loading">
<input id="file-0a" class="file" type="file" multiple data-min-file-count="1">
</div>
<br>
<button type="submit" class="btn btn-primary">Submit</button>
<button type="reset" class="btn btn-outline-secondary">Reset</button>
</form>
<hr>
<h5>Preupload Validation</h5>
<input id="file-0" name="file-0" type="file">
<br>
<textarea id="description" rows=3" class="form-control" placeholder="Enter description for the files selected..."></textarea>
<br>
<form enctype="multipart/form-data" action="">
<label for="file-0b">Test invalid input type</label>
<div class="file-loading">
<input id="file-0b" name="file-0b" class="file" type="text" multiple data-min-file-count="1">
</div>
<script>
$(document).on('ready', function () {
$("#file-0b").fileinput();
});
</script>
</form>
<hr>
<form enctype="multipart/form-data" action="http://localhost/plugins/test">
<div class="file-loading">
<input id="file-0c" class="file" type="file" multiple data-min-file-count="3">
</div>
<hr>
<div class="form-group">
<div class="file-loading">
<input id="file-0d" class="file" type="file">
</div>
</div>
<hr>
<div class="form-group">
<div class="file-loading">
<input id="file-1" type="file" multiple class="file" data-overwrite-initial="false" data-min-file-count="2">
</div>
</div>
<hr>
<div class="form-group">
<div class="file-loading">
<input id="file-2" type="file" class="file" readonly data-show-upload="false">
</div>
</div>
<hr>
<div class="form-group">
<label for="file-3">Batch Preupload Error Check</label>
<div class="file-loading">
<input id="file-3" type="file" multiple>
</div>
</div>
<hr>
<div class="form-group">
<div class="file-loading">
<input id="file-4" type="file" class="file" data-upload-url="#">
</div>
</div>
<hr>
<div class="form-group">
<button class="btn btn-warning" type="button">Disable Test</button>
<button class="btn btn-info" type="reset">Refresh Test</button>
<button class="btn btn-primary">Submit</button>
<button class="btn btn-outline-secondary" type="reset">Reset</button>
</div>
<hr>
<div class="form-group">
<div class="file-loading">
<input type="file" class="file" id="test-upload" multiple>
</div>
<div id="errorBlock" class="help-block"></div>
</div>
<hr>
<div class="form-group">
<div class="file-loading">
<input id="file-5" class="file" type="file" multiple data-preview-file-type="any" data-upload-url="#">
</div>
</div>
</form>
<hr>
<h4>Multi Language Inputs</h4>
<form enctype="multipart/form-data">
<label>French Input</label>
<div class="file-loading">
<input id="file-fr" name="file-fr[]" type="file" multiple>
</div>
<hr style="border: 2px dotted">
<label>Spanish Input</label>
<div class="file-loading">
<input id="file-es" name="file-es[]" type="file" multiple>
</div>
</form>
<hr>
<h4>Test <code>addToStack</code></h4>
<label>Select file below which will automatically be added to the plugin preview later</label>
<div class="input-group mb-3">
<input type="file" class="form-control" id="inp-add-1">
</div>
<hr>
<input type="file" id="inp-add-2" name="inp-add-2" multiple>
<br>
</div>
</body>
<script>
$('#file-fr').fileinput({
theme: 'fa5',
language: 'fr',
uploadUrl: '#',
allowedFileExtensions: ['jpg', 'png', 'gif']
});
$('#file-es').fileinput({
theme: 'fa5',
language: 'es',
uploadUrl: '#',
allowedFileExtensions: ['jpg', 'png', 'gif']
});
$("#file-0").fileinput({
theme: 'fa5',
uploadUrl: '#'
}).on('filepreupload', function(event, data, previewId, index) {
alert('The description entered is:\n\n' + ($('#description').val() || ' NULL'));
});
$("#file-1").fileinput({
theme: 'fa5',
uploadUrl: '#', // you must set a valid URL here else you will get an error
allowedFileExtensions: ['jpg', 'png', 'gif'],
overwriteInitial: false,
maxFileSize: 1000,
maxFilesNum: 10,
//allowedFileTypes: ['image', 'video', 'flash'],
slugCallback: function (filename) {
return filename.replace('(', '_').replace(']', '_');
}
});
/*
$(".file").on('fileselect', function(event, n, l) {
alert('File Selected. Name: ' + l + ', Num: ' + n);
});
*/
$("#file-3").fileinput({
theme: 'fa5',
browseClass: "btn btn-primary",
overwriteInitial: false,
initialPreviewAsData: true,
//uploadUrl: 'http://localhost/plugins/test-upload',
initialPreview: [
"https://dummyimage.com/640x360/a0f.png&text=Transport+1",
"https://dummyimage.com/640x360/3a8.png&text=Transport+2",
"https://dummyimage.com/640x360/6ff.png&text
文件上传插件bootstrap File
需积分: 10 39 浏览量
2022-08-01
15:32:18
上传
评论
收藏 375KB ZIP 举报
bootstrap-fileinput-master.zip （98个子文件） 
bootstrap-fileinput-master css 
fileinput.min.css 10KB fileinput-rtl.css 3KB fileinput-rtl.min.css 2KB fileinput.css 13KB img 
loading-sm.gif 3KB loading.gif 847B js locales el.js 9KB uk.js 8KB nl.js 7KB ca.js 7KB fa.js 7KB zh.js 6KB es.js 7KB cr.js 6KB da.js 6KB kz.js 7KB tr.js 7KB gl.js 7KB de.js 7KB bg.js 7KB hu.js 7KB fi.js 6KB th.js 8KB it.js 7KB sk.js 7KB lt.js 6KB ro.js 7KB lv.js 6KB pt.js 7KB ka.js 9KB fr.js 7KB zh-TW.js 6KB LANG.js 6KB sr-latn.js 6KB az.js 7KB ru.js 8KB no.js 6KB sl.js 6KB sv.js 6KB uz.js 7KB id.js 6KB ar.js 7KB vi.js 7KB kr.js 7KB pl.js 7KB et.js 6KB uz-Cy.js 8KB pt-BR.js 7KB ja.js 8KB he.js 7KB cs.js 7KB fileinput.js 297KB plugins filetype.js 57KB piexif.js 75KB sortable.min.js 43KB filetype.min.js 22KB buffer.js 68KB buffer.min.js 50KB sortable.js 121KB piexif.min.js 29KB fileinput.min.js 129KB nuget Package.nuspec 1012B build.bat 1KB themes gly theme.min.js 2KB theme.js 3KB explorer-fa4 theme.css 4KB theme.min.js 3KB theme.min.css 3KB theme.js 4KB fa5 theme.min.js 2KB theme.js 3KB fa4 theme.min.js 2KB theme.js 3KB explorer theme.css 4KB theme.min.js 1KB theme.min.css 3KB theme.js 2KB fa6 theme.min.js 2KB theme.js 3KB explorer-fa6 theme.css 4KB theme.min.js 3KB theme.min.css 3KB theme.js 4KB explorer-fa5 theme.css 4KB theme.min.js 3KB theme.min.css 3KB theme.js 4KB bs5 theme.min.js 2KB theme.js 3KB examples 
index-bs3.html 2KB index-bs5.html 12KB index-bs4.html 12KB scss fileinput.scss 15KB themes explorer-fa4 theme.scss 4KB explorer theme.scss 4KB explorer-fa6 theme.scss 5KB explorer-fa5 theme.scss 5KB fileinput-rtl.scss 3KB
评论0