Bootstrap File Input 的使用

本文转载自查看原文 2016-02-07 09:21 5481 boostrap input file

由于工作需要使用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\"}";
}
?>

使用截图

上传成功

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 bootstrap file input 官方文档翻译 Bootstrap中关于input里file的样式更改 [logstash-input-file]插件使用详解使用input的file进行上传进行预览 input type="file" 上传文件的一些使用使用js清空input file上传文件的内容使用js清空input file上传文件的内容【转】file_get_contents("php://input")的使用方法【apache】No input file specified ace input file 上传