ファイルのアップロードボタンのWebフロントエンドのカスタムスタイル

 

アイデア：

入力を監視JSでファイルをアップロードするために変更した後、作成する方法を独自のスタイルを作成する方法を非表示にするには、ボタン、。

 

フロントエンドの書き込み：

// jqueryの+ブートストラップ言葉遣い

<！DOCTYPE HTML > 
< HTML LANG = "EN" > 
< 頭> 
    < メタ文字コード= "UTF-8" > 
    < タイトル>上传文件获取URL </ タイトル> 
    < リンクのrel = "スタイルシート" のhref = "/静的/ bootstrap- 3.3.7-DIST / CSS / bootstrap.css」> 
    < スタイル> 

        .uploader { 
            位置：相対。
        } 

        。; 
            トップ：4PX 。
            不透明度：0 ; 
            幅：100％; 
        } 

    </ スタイル> 
</ ヘッド> 
< ボディ> 

< DIV クラス= "コンテナ流体" > 

    < DIV クラス= "行" スタイル= "マージン：0;マージントップ：20ピクセル;" > 
        < DIV クラス= "COL-MD-1" > 
            < divのクラス= "アップローダー" > 
                <= "BTN BTN原色" >上传图片</ ボタン> 
                < フォームID = "file_form" > 
                    < 入力タイプ= "ファイル" ID = "ファイル" 名= "ファイル" > 
                </ フォーム> 
            </ DIV > 
        </ DIV > 
    </ DIV > 

    < 時間> 

    < DIV クラス= "行" > 

    </ DIV > 

</ DIV > 

<スクリプトSRC = "/静的/ JS / jquery.js" > </スクリプト> 
< スクリプトSRC = "/静的/ブートストラップ3.3.7-DIST / JS / bootstrap.min.js" > </ スクリプト> 
< スクリプト> 

    関数の開始（）{
         // 上传文件
        upload_file（）。
    } 

    関数upload_file（）{ 
        $（' #FILE ' ）.change（関数（）{
             VARのデータ=  新しいいるFormData（$（' #file_form ' ）[ 0 ]）;
             // 上传文件
             $アヤックス（{
                URL： ` /V1 / API / 答え/ kf_type / $ {} kf_type / アップロード/ `、
                種類：' POST ' 、
                データ：データ、
                PROCESSDATA：falseに、   //はデータを示しているが、処理されていない
                のcontentType：falseに、   // データ・タイプ設定していない
                データ型を：" JSON " 、
                成功：機能（レスポンス）{ 
                    アラート（レスポンス[ "メッセージ" ]）;
                     IF （last_page_url ==！ '' ）{ 
                        GET_INFO（last_page_url）; 
                    } 他{ 
                        GET_INFO（）; 
                    } 
                    // 空のファイル、次の準備のためにファイルアップロード
                    $（' #FILE ' ）.val（'' ）; 
                } 
            }）; 

        }）
    } 

    スタート（）; 

</ スクリプト> 
</ ボディ> 
</ HTML >

 

文言の後端ビューをジャンゴ：

デフimage_upload（REQ）：
    ファイル = req.FILES.get（' ファイル' ）
    値 = file.read（）
     の戻りはHttpResponse（" OK "）

//値は、ファイルの内容です

 

図遠位効果：

 

 //私はおそらく書いて、自分のスタイルに合わせて調整することができます