Upload File button web front-end custom style

Ideas:

Button to hide, how to write your own style how to write, after changing to upload files by js monitoring input.

Front-end writing:

// jquery + bootstrap wording

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>上传文件获取URL</title>
    <link rel="stylesheet" href="/static/bootstrap-3.3.7-dist/css/bootstrap.css">
    <style>

        .uploader{
            position: relative;
        }

        .uploader input{
            position: absolute;
            top: 4px;
            opacity: 0;
            width: 100%;
        }

    </style>
</head>
<body>

<div class="container-fluid">

    <div class="row" style="margin: 0 0;margin-top: 20px;">
        <div class="col-md-1">
            <div class="uploader">
                <button class="btn btn-primary">上传图片</button>
                <form id="file_form">
                    <input type="file" id="file" name="file">
                </form>
            </div>
        </div>
    </div>

    <hr>

    <div class="row">

    </div>

</div>

<script src="/static/js/jquery.js"></script>
<script src="/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script>

    function start() {
        // 上传文件
        upload_file();
    }

    function upload_file() {
        $('#file').change(function () {
            var data = new FormData($('#file_form')[0]);
            // 上传文件
            $.ajax({
                URL: ` / V1 / API / answer / kf_type / $ {} kf_type / Upload / `, 
                type: ' POST ' , 
                Data: Data, 
                the processData: to false ,   // indicates data is not processed 
                contentType: to false ,   // do not set data type 
                dataType: ' JSON ' , 
                Success: function (Response) { 
                    Alert (Response [ "the Message " ]);
                     IF (last_page_url ! ==  '' ) { 
                        get_info (last_page_url); 
                    } the else { 
                        get_info (); 
                    } 
                    // empty file, file upload in preparation for the next 
                    $ ( ' #file ' ) .val ( '' ); 
                } 
            }); 

        }) 
    } 

    Start (); 

</ Script > 
</ body > 
</ HTML >

django rear end view of the wording:

def image_upload(req):
    file = req.FILES.get('file')
    value = file.read()
    return HttpResponse("ok")

// value is the contents of the file

FIG distal Effect:

// can be adjusted according to their own style, I probably wrote

Upload File button web front-end custom style

Guess you like