layuiアップロード画像の実装プロセス

書き込み、一つだけを持つことができるページをlayui.userより多くの結果は、JSを実現します

写真をアップロードし、公式文書では、多くの機能を持っていますが、あなたはコードがシンプルパッチワーク、など下記のファイルサイズの制限として指定された場所に配置する必要はなく、一緒にJSをしたい場合のコードは、機能的なデモの単なるデモンストレーションです。

<！DOCTYPE HTML > 
< HTML LANG = "EN" > 
< 頭> 
    < メタ文字コード= "UTF-8" > 
    < タイトル> layui动画测试</ タイトル> 
        < スクリプトSRC = "https://cdn.bootcss.com/jquery /3.4.1/jquery.min.js " > </ スクリプト> 
        < リンクのrel = "スタイルシート" のhref = "https://www.layuicdn.com/layui/css/layui.css" > 
        < スクリプトSRC =" HTTPS：//www.layuicdn。> 

</ ヘッド> 
< 身体> 
    < divのスタイル= "テキスト整列：センター" > 
        < IMGのデータ・アニメーション= "layui-アニメーション-scaleSpring" クラス= "layuiアップロードlayui-アニメーション" ID = "id_upload_img" 
             SRC = 「https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1564555274864&di=f0897dc4a00cccc5f71bdd0d46fe1720&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201608%2F21%2F20160821230024_MyCYK.thumb .700_0.jpeg」スタイル= "境界半径：50％;幅：18％" > 
        <div クラス= "layuiワードAUX" >私の写真を変更します。</ divの> 
        < divのクラス= "layui-Wordの-AUX"は>サイズ60キロバイトを制限するために写真をアップロード</ DIV > 
    </ DIV > 

< スクリプト> 
    layui.use（[ ' アップロード' ]、関数）（ {
             VARのレイヤ= layui.layer;
             するvar $ = layui.jquery 
                、アップロード= layui.upload;
         // 共通画像アップロード開始
            VAR uploadInst = upload.render（{
                elemは：' #id_upload_img ' 、
                URL：' /ユーザー/ upload_img / ' 、
                サイズ：60 、// KBのファイルサイズを制限
                する前に：機能（OBJ）{
                 // 前の典型的なローカルファイルの読み込み、IE8のサポートしていない
                obj.previewを（関数（指数、ファイル、結果）{ 
                    $（' #id_upload_img ' ）.ATTR（' SRC ' 、結果）; // 画像リンク（Base64で）
                }）; 
                }、
                DONE：機能（RES）{
                    // アップロードが失敗した場合
                    のIF （res.status >  0 ）{
                         リターンlayer.msgが（' アップロードに失敗した' ）; 
                    } 
                    // 正常にアップロード
                    } 
                    、エラー：関数（）{
                     // プレゼンテーションの状態が失敗し、再送を達成するため
                のvar demoTextを= $（' #demoText ' ）; 
                demoText.html（"）;<スパンのスタイル= "色：＃1 FF5722は;"> </ span>の<a class="layui-btn layui-btn-xs demo-reload">再試行</a>のアップロードに失敗した'
                demoText.find（' .demoリロード' ）.on（' クリック' 、関数（）{ 
                    uploadInst.upload（）; 
                    }）; 
                    } 
                    }）; 
        // 共通の画像アップロード端
    }）
 </ スクリプト> 
</ ボディ> 
</ HTML >