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

Bootstrap File Input 的使用

2016-02-07 09:21 489 查看
由于工作需要使用Bootstrap的FileInput插件，在此分享下插件的使用方法

直接上代码

fileinput.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/fileinput.css" />
</head>
<body>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/fileinput.js" ></script>
<script type="text/javascript" src="js/fileinput_locale_zh.js" ></script>
<label class="control-label">Select File</label>

<input id="input-2" name="input2" type="file" class="file-loading">

<script type="text/javascript">

var ctrlName = 'input-2';
var control = $('#' + ctrlName);

control.fileinput({
uploadUrl:'http://localhost:8080/upload.php',
showCaption: false,
showCancel:false,
showUploadedThumbs:false,
showClose:false,
autoReplace:true,
maxFileCount:1,
overwriteInitial:true,
showUploadedThumbs:false,
language:'zh',
initialPreview:"<img src='/back_t.jpg' class='file-preview-image' />",
initialPreviewCount:1,
initialPreviewShowDelete:false,
layoutTemplates:{
actions: '<div class="file-actions">\n' +
'    <div class="file-footer-buttons">\n' +
'    </div>\n' +
'    <div class="file-upload-indicator" tabindex="-1" title="{indicatorTitle}">{indicator}</div>\n' +
'    <div class="clearfix"></div>\n' +
'</div>'
}
}).on('fileuploaded', function(event, data, previewId, index){ console.log(data.response.message); });

</script>
</body>

</html>


uploadFile.php

<?php

if ($_FILES['input2']["type"] == "image/png") {
echo "{\"code\":0, \"message\":\"upload success!\"}";
} else {
echo "{\"code\":-1, \"error\":\"Invalid file format\"}";
}
?>


使用截图



上传成功

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航