bootstrap fileupload記錄

時間 2019-11-19

標籤 bootstrap fileupload 記錄欄目 Bootstarp 简体版

原文原文鏈接

原本是準備學習bootstrap的，想寫個文件上傳的demo，可是百度了半天，最終也沒有找到想要的內容，如今把學習過程當中的資料紀錄一下，以便使用：javascript

js下載：地址是：https://github.com/kartik-v/bootstrap-fileinput/css

這個網站提供了不少的DEMO：http://plugins.krajee.com/file-input/demohtml

從這裏下載就能夠了，接下來在頁面中添加一個js引用和對應的內容：java

主要是CSS和JS的引用： python

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
    <meta name="Keywords" content="Server monitor,python web, flask redis, flask http" />
    <meta name="Description" content="Redis Monitor: a python flask server monitor project, include redis and http server." />
    <!-- 上述3個meta標籤*必須*放在最前面，任何其餘內容都*必須*跟隨其後！ -->
    <title>主機管理</title>

    <!-- Bootstrap core CSS -->
    <link href="/static/res/lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="/static/res/css/style.css" rel="stylesheet">
    <link href="/static/res/lib/fileupload/css/fileinput.css" media="all" rel="stylesheet" type="text/css" />

    <link rel="shortcut icon" href="/static/res/favicon.ico"/>
    <link rel="bookmark" href="/static/res/favicon.ico"/>

    <title>DashBoard</title>
</head>
<body>

<div class="container kv-main">
            <div class="page-header">
            <h2>Bootstrap File Input Example </h2>
            </div>
            <form enctype="multipart/form-data" method="post" action="/upload" id="uploadForm">
                <input id="file-0a" class="file" type="file" name="image_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>
    <div id="kv-error-1" style="margin-top:10px;display:none"></div>
<div id="kv-success-1" class="alert alert-success fade in" style="margin-top:10px;display:none"></div>
</div>

{% include "/include/buttom.html" %}
    <script src="/static/res/lib/fileupload/js/fileinput.js" type="text/javascript"></script>
    <script src="/static/res/lib/fileupload/js/fileinput_locale_zh.js" type="text/javascript"></script>
 <script>
       $("#file-0a").fileinput({
           'allowedFileExtensions' : ['jpg', 'png','gif'],
           uploadUrl: "/upload", // server upload action
            uploadAsync: true,
            showPreview: false,
            showUpload : false,
            maxFileCount: 1,
            elErrorContainer: '#kv-error-1'
       });

    $("#uploadForm").submit(function(event) {
        var formData = new FormData(this);
        event.preventDefault();
        $.ajax({
            url : '/upload',
            type : 'POST',
            data : formData,
            contentType : false,
            processData : false,
            success : function(data) {
                if (data.result == 'success') {
                    $("#uploadFileDiv").slideToggle("slow");
                } else {
                   alert(data);
                }
            },
            error : function() {
               alert("data-error");
            }
        });

    });
</script>

</body>
</html>

fileinput的參數有不少，但網站基本上都沒有API的：
git

allowedFileExtensions	["jpg", "png", "gif"]	文件結尾的名字，這個是要顯示在一個特別的地方的。
uploadUrl:	"/upload", // server upload action	若是顯示上傳的按鈕的話，這個url是提交的地址。
elErrorContainer:	'#kv-error-1'	錯誤信息顯示地方
uploadAsync:	false	是否異步方式提交
showPreview:	false	是否顯示預覽框
showUpload:	false	是否顯示提交按鈕

提交方式有兩種：
github

一種是經過他本身提供的方式提交。一種是本身寫js代碼，這個我以爲比較好控制，因此，demo裏就這樣寫吧。web

1. bootstrap-datetimepicker.js 記錄
2. jquery fileupload 文件上傳使用記錄
3. bootstrap踩坑記錄
4. Bootstrap入門-記錄
5. bootstrap學習記錄
6. bootstrap文件上傳fileupload插件
7. SpringMVC + bootstrap fileupload 多文件上傳
8. FileUpload
9. fileupload 使用
10. SpringBoot-fileUpload
更多相關文章...
• ADO 添加記錄 - ADO 教程
• ADO 更新記錄 - ADO 教程
• Tomcat學習筆記（史上最全tomcat學習筆記）
• Github 簡明教程

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。