由于工作需要使用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/uploadFile.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){});
</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\"}";
}
?>
成功返回 upload success!
我的个人主页521100.net