<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>boostrap可拖动文件批量上传代码 - 网页模板</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/default.css">
<link href="css/fileinput.css" media="all" rel="stylesheet" type="text/css" />
<!--[if IE]>
<script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->
</head>
<body>
<div class="htmleaf-container">
<header class="htmleaf-header">
<h1>boostrap可拖动文件批量上传代码 </h1>
</header>
<div class="container kv-main">
<div class="page-header">
<h2>Bootstrap File Input Example <small></h2>
</div>
<form enctype="multipart/form-data">
<input id="file-0a" class="file" type="file" multiple data-min-file-count="1">
<br>
<button type="submit" class="btn btn-primary">Submit</button>
<button type="reset" class="btn btn-default">Reset</button>
</form>
<hr>
<form enctype="multipart/form-data">
<label>Test invalid input type</label>
<input id="file-0b" class="file" type="text" multiple data-min-file-count="1">
<script>
$(document).on('ready', function(){$("#file-0b").fileinput();});
</script>
</form>
<hr>
<form enctype="multipart/form-data">
<input id="file-0a" class="file" type="file" multiple data-min-file-count="3">
<hr>
<div class="form-group">
<input id="file-0b" class="file" type="file">
</div>
<hr>
<div class="form-group">
<input id="file-1" type="file" multiple class="file" data-overwrite-initial="false" data-min-file-count="2">
</div>
<hr>
<div class="form-group">
<input id="file-2" type="file" class="file" readonly data-show-upload="false">
</div>
<hr>
<div class="form-group">
<label>Preview File Icon</label>
<input id="file-3" type="file" multiple=true>
</div>
<hr>
<div class="form-group">
<input id="file-4" type="file" class="file" data-upload-url="#">
</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-default" type="reset">Reset</button>
</div>
<hr>
<div class="form-group">
<input type="file" class="file" id="test-upload" multiple>
<div id="errorBlock" class="help-block"></div>
</div>
<hr>
<div class="form-group">
<input id="file-5" class="file" type="file" multiple data-preview-file-type="any" data-upload-url="#" data-preview-file-icon="">
</div>
</form>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/fileinput.js" type="text/javascript"></script>
<script src="js/fileinput_locale_zh.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<script>
$("#file-0").fileinput({
'allowedFileExtensions' : ['jpg', 'png','gif'],
});
$("#file-1").fileinput({
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({
showUpload: false,
showCaption: false,
browseClass: "btn btn-primary btn-lg",
fileType: "any",
previewFileIcon: "<i class='glyphicon glyphicon-king'></i>"
});
$("#file-4").fileinput({
uploadExtraData: {kvId: '10'}
});
$(".btn-warning").on('click', function() {
if ($('#file-4').attr('disabled')) {
$('#file-4').fileinput('enable');
} else {
$('#file-4').fileinput('disable');
}
});
$(".btn-info").on('click', function() {
$('#file-4').fileinput('refresh', {previewClass:'bg-info'});
});
/*
$('#file-4').on('fileselectnone', function() {
alert('Huh! You selected no files.');
});
$('#file-4').on('filebrowse', function() {
alert('File browse clicked for #file-4');
});
*/
$(document).ready(function() {
$("#test-upload").fileinput({
'showPreview' : false,
'allowedFileExtensions' : ['jpg', 'png','gif'],
'elErrorContainer': '#errorBlock'
});
/*
$("#test-upload").on('fileloaded', function(event, file, previewId, index) {
alert('i = ' + index + ', id = ' + previewId + ', file = ' + file.name);
});
*/
});
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
<p>来源：<a href="http://www.moobnn.com/" target="_blank">网页模板</a></p>
</div>
</body>
</html>
boostrap可拖动文件批量上传代码.zip
版权申诉
150 浏览量
2022-11-16
21:21:23
上传
评论
收藏 130KB ZIP 举报
boostrap可拖动文件批量上传代码.zip （35个子文件） 
boostrap可拖动文件批量上传代码 
boostrap可拖动文件批量上传代码.jpg 41KB jiaoben3738 css 
default.css 6KB fileinput.min.css 3KB normalize.css 2KB fileinput.css 4KB img 
loading-sm.gif 3KB loading.gif 847B fonts icomoon.woff 1KB
icomoon.svg 2KB icomoon.eot 2KB icomoon.ttf 1KB
index.html 6KB js fileinput_locale_fr.js 2KB jquery.min.js 82KB fileinput_locale_zh.js 2KB fileinput.js 98KB fileinput_locale_ru.js 3KB fileinput_locale_sk.js 2KB fileinput_locale_sr.js 2KB fileinput_locale_nl.js 2KB fileinput_locale_hu.js 2KB bootstrap.min.js 35KB fileinput_locale_it.js 2KB fileinput_locale_es.js 2KB fileinput_locale_tr.js 2KB fileinput_locale_th.js 3KB fileinput_locale_uk.js 3KB fileinput.min.js 47KB fileinput_locale_pl.js 2KB fileinput_locale_LANG.js 2KB fileinput_locale_pt.js 2KB fileinput_locale_de.js 2KB fileinput_locale_cz.js 2KB nuget Package.nuspec 1014B build.bat 874B资源评论
