您的位置：首页 > Web前端 > BootStrap

bootstrap-fileupload-上传文件控件

2016-01-17 21:30 555 查看
官方github：https://github.com/kartik-v/bootstrap-fileinput

官方dome网站：http://plugins.krajee.com/file-basic-usage-demo

博客参考：http://www.cnblogs.com/wuhuacong/p/4774396.html

如何下位案例：其中bootstrap为3.3.5，jquery为2.1.1，bootstrap-fileinput为3.x

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<link href="bootstrap-fileinput-master/css/fileinput.min.css" media="all" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<!-- canvas-to-blob.min.js is only needed if you wish to resize images before upload.
This must be loaded before fileinput.min.js -->
<script src="bootstrap-fileinput-master/js/plugins/canvas-to-blob.min.js" type="text/javascript"></script>
<script src="bootstrap-fileinput-master/js/fileinput.min.js"></script>
<!-- bootstrap.js below is only needed if you wish to the feature of viewing details
of text file preview via modal dialog -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" type="text/javascript"></script>
<!-- optionally if you need translation for your language then include
locale file as mentioned below -->
<script src="bootstrap-fileinput-master/js/fileinput_locale_zh.js"></script>
</head>

<body>
<label class="control-label">Select File</label>
<input id="input-1" type="file" class="file">

<label class="control-label">Select File</label>
<input id="input-1a" type="file" class="file" data-show-preview="false">

<label class="control-label">Select File</label>
<input id="input-2" name="input2[]" type="file" class="file" multiple data-show-upload="false" data-show-caption="true">

<label class="control-label">Readonly Input</label>
<input id="input-3a" type="file" class="file" readonly="true">
<label class="control-label">Disabled Input</label>
<input id="input-3b" type="file" class="file" disabled="true">

<label class="control-label">Select File</label>
<input id="input-4" name="input4[]" type="file" multiple class="file-loading">
<script>
$(document).on('ready', function() {
$("#input-4").fileinput({showCaption: false});
});
</script>

<label class="control-label">Select File</label>
<input id="input-6" name="input6[]" type="file" multiple class="file-loading">
<script>
$(document).on('ready', function() {
$("#input-6").fileinput({
showUpload: false,
maxFileCount: 10,
mainClass: "input-group-lg"
});
});
</script>

<label class="control-label">Select File</label>
<input id="input-7" name="input7[]" multiple type="file" class="file file-loading" data-allowed-file-extensions='["csv", "txt"]'>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航