< divのクラス= "layuiアップロード" > < ボタンタイプ= "ボタン" クラス= "layui-BTN" ID = "TEST2" >多图片上传</ ボタン> < BLOCKQUOTE クラス= "layui-elemは引用符layui、引用-nm」スタイル= "マージントップ：10pxの;幅：88％" > プレビュー： < divのクラス=「layuiアップロードリストアップローダーリスト」スタイル=「オーバーフロー：自動;」ID = "アップローダーリスト" > </ DIV > </ BLOCKQUOTE > </ DIV >
CSS：
<スタイルタイプ= "テキスト/ cssの"> .uploaderリスト { マージン左：-15px。 } の.info .uploaderリスト { 位置：相対。 マージントップ：-25px ; 背景色：黒。 色：白 ; フィルタ：アルファ（不透明度= 80） 。 -moz-不透明度：0.5。 不透明度：0.5 ; 幅：100ピクセル ; 高さ：25ピクセル ; テキスト整列：センター ; 表示：なし ; } .uploaderリスト.handle { 位置：相対。 背景色：黒。 色：白 ; フィルタ：アルファ（不透明度= 80） 。 -moz-不透明度：0.5。 不透明度：0.5 ; 幅：100ピクセル ; テキスト整列：右 ; 高さ：18px ; マージン下：-18px ; 表示：なし ; } I .handle .uploaderリスト { マージン右：5pxの。 } I .handle .uploaderリスト：ホバー { カーソル：ポインタ。 } .uploaderリスト.FILE-iteme { マージン：12ピクセル0 0 15ピクセル。 パディング：1ピクセル。 フロート：左 ; } </スタイル>
JS：
1 upload.render（{ 2 3。 ELEM： '＃1 TEST2' 。4 。5 、URL： '' 6。 7。、 複数：trueに 8。 9。 、前：関数（OBJ）{ 10 。11 layer.msg（「画像アップロード... ' 、{ 12は 13である アイコン16 、 14 15 シェード：0.01 、 16 17。 時間：0 ：18 。19 }） 20はある 21れます } 22 23 、行わ：機能（RES）{ 24 25 layer.close（layer.msg（））。// 关闭上传提示窗口 26 27 // 上传完毕 28 29 $（ '＃アップローダー-list'の）.append（ 30 31 '<div要素のid = ""クラス= "ファイルiteme">' + 32 33 「<div要素クラス= "ハンドル"> <Iクラス= "layui-アイコンlayui-アイコンの削除"> </ I> </ div> '+ 34 35 ' <IMGのスタイル= "幅：100ピクセル、高さ100ピクセル;" SRC = '+ res.data.src +'>」 '<DIV CLASS = "情報">' + res.data.title + '</ div>' + 38 39 '</ div>' 40 41 ）。 42 43 } 44 45 }）; 46 $（文書）.on（ "のMouseEnter mouseleave"、 ".FILE-iteme"、関数（イベント）{ 47 48 であれば（event.type === "のMouseEnter" ）{ 49 50 // 鼠标悬浮 51 52 $（この）.children（ "情報"）フェードイン（"速いです"。）; 。）.children（ "ハンドル"）フェードイン（"速いです" ）; 55 56 } そう であれば（event.type === "mouseleave" ）{ 57 58 // 鼠标离开 59 60 $（この）.children（ "情報" ）.hide（）; 61 62 $（この）.children（ "ハンドル。" ）.hide（）; 63 64 } 65 66 }）; 67 68 // 删除图片 69 $（文書）.on（ ".FILE-itemeは.handle"、 "クリック"70 71は、 $（この）.Parent（）削除（）; 72 73である }）; 74 // thinkphpアップロードされたファイルの処理： 75パブリック関数アップロード（）{ 76 77 // 。終了（のroot_path 'パブリック' DS」を..アップロード）; 78 79 // アップロードファイルにフォームがアップロードゲット例えば001.JPG 80 81 $ファイル要求=（） - >ファイル（ 'ファイル' ）; 82 83 //は、アプリケーションのルートに枠を移動/公共/アップロード/ディレクトリ 84 85 IF （$ファイル）{ 86 87 [ファイル] -情報= $ $>検証（[ 'サイズ' => 2097152、 'EXT' => 'JPG、PNG、GIF']） - >移動（のroot_path '公共' DS 'アップロード' ...）; // 2メガバイトの定義 88 89 IFを（$情報）{ 90 91がある $ SRC = '/アップロード/' str_replace（ '\\'、 "/"、$ info->。getSaveName（））; 92 93 $ =画像の画像::オープン（$ SRC）; 94 95 $イメージ- >親指（750、750） - >保存（$ SRC）; // 圧縮画像サイズ 96 97 $ RES [ 'コード'] = 0 ; 98 99 $ RES [「MSG '] ='アップロード成功！" ; 100 101 RES $ [ 'データ'] [ 'SRC'] = '/アップロード/' str_replace（ '\\'、 "/"、$ info->。getSaveName（））; 102 103 $ RES [ 'データ'] [ '表題'] = $ info-> getFilename（）; 104 105 } 他{ 106 107 // 取得アップロード失敗したエラーメッセージ 108の 109 $のRESを['コード'] = 1 ; 110の 111 $のRES [' MSG '] ='アップロード失敗しました！「$ファイル> getError（）; 112 113 } 114の 115 戻りの$ RES。