abstract：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <link rel="stylesheet" href="plug/layui/css/layui.c
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="plug/layui/css/layui.css">
<link rel="stylesheet" href="style/main.css">
<link rel="stylesheet" type="text/css" href="plug/webuploader/css/webuploader.css">
<script src="style/jquery-3.2.1.min.js"></script>
<script src="plug/layui/layui.js"></script>
<script type="text/javascript" src="plug/ueditor/ueditor.config.js"></script>
<script type="text/javascript" src="plug/ueditor/ueditor.all.js"></script>
<script type="text/javascript" src="plug/webuploader/dist/webuploader.js"></script>
<title>文章列表</title>
</head>
<body>
<div class="layui-tab">
<ul class="layui-tab-title">
<li class="layui-this">文章列表</li>
<li>添加文章</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">
<div class="form_search">
<form class="layui-form" action="">
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">分類</label>
<div class="layui-input-inline">
<select name="interest" lay-filter="aihao">
<option value=""></option>
<option value="0">寫作</option>
</select>
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">文章標題</label>
<div class="layui-input-inline">
<input type="text" name="title" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">瀏覽量</label>
<div class="layui-input-inline">
<select name="interest" lay-filter="aihao">
<option value=""></option>
<option value="0"></option>
</select>
</div>
</div>
<button class="layui-btn layui-btn-warm">搜索</button>
</div>
</form>
</div>
<table class="layui-table">
<thead>
<tr>
<th>ID號</th>
<th>排序</th>
<th>標題</th>
<th>分類</th>
<th>縮略圖</th>
<th>瀏覽量</th>
<th>評論</th>
<th>更新時間</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>賢心</td>
<td>賢心</td>
<td>賢心賢心賢心賢心賢心</td>
<td>賢心</td>
<td>賢心</td>
<td>賢心</td>
<td>賢心</td>
<td>2016-11-29</td>
<td>人生就像是一場修行</td>
</tr>
</tbody>
</table>
</div>
<div class="layui-tab-item">
<form class="layui-form" action="">
<div class="layui-form-item">
<label class="layui-form-label">選擇屬性：</label>
<div class="layui-input-block">
<input type="checkbox" name="" title="屬性1" lay-skin="primary">
<input type="checkbox" name="" title="屬性2" lay-skin="primary">
<input type="checkbox" name="" title="屬性3" lay-skin="primary">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">標題：</label>
<div class="layui-input-block">
<input type="text" name="title" required lay-verify="required" placeholder="請輸入標題" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">分類：</label>
<div class="layui-input-block">
<select name="city" lay-verify="required">
<option value=""></option>
<option value="0">北京</option>
<option value="1">上海</option>
<option value="2">廣州</option>
<option value="3">深圳</option>
<option value="4">杭州</option>
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">seo關鍵字：</label>
<div class="layui-input-block">
<input type="text" name="title" required lay-verify="required" placeholder="請輸入標題" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">seo描述：</label>
<div class="layui-input-block">
<textarea name="desc" placeholder="請輸入內容" class="layui-textarea"></textarea>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">縮略圖：</label>
<div class="layui-input-block">
<div id="uploader-demo">
<div id="filePicker">選擇圖片</div>
<img id="upload_pic">
<input type="hidden" name="thumb" />
</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">縮略圖alt：</label>
<div class="layui-input-block">
<input type="text" name="thumb_alt" placeholder="請輸入標題" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">編輯器：</label>
<div class="layui-input-block">
<script id="container" name="content" type="text/plain"></script>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="formDemo">保存</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
</div>
</div>
</div>
<style>
#filePicker label{height: 40px!important;width: 80px!important;}
#filePicker input{height: 40px!important;}
</style>
<script>
layui.use(['form','element','layer'], function(){
var form = layui.form;
var element = layui.element;
var layer=layui.layer;
});
var ue = UE.getEditor('container',{
initialFrameWidth:1400,
initialFrameHeight:400
});
var uploader = WebUploader.create({
// 選完文件后，是否自動上傳。
auto: true,
// swf文件路徑
swf: 'plug/webuploader/dist/Uploader.swf',
// 文件接收服務端。
server: 'thumb.php',
// 選擇文件的按鈕?？蛇x。
// 內部根據(jù)當前運行是創(chuàng)建，可能是input元素，也可能是flash.
pick: '#filePicker',
// 只允許選擇圖片文件。
accept: {
title: 'Images',
extensions: 'gif,jpg,jpeg,bmp,png',
mimeTypes: 'image/*'
}
});
uploader.on( 'uploadSuccess', function( file,response ) {
if (response.code==1){
$('#upload_pic').attr('src','upload/'+response.pic_name);
$('#upload_pic').css({'width':'120px','height':'120px'});
$("input[name='thumb']").val(response.pic_name);
} else{
layer.msg(response.msg);
}
});
</script>
</body>
</html>
//thumb.php 上傳文件
<?php
/**
* Created by PhpStorm.
* User: Administrator
* Date: 2019/4/8
* Time: 22:27
*/
// http://ipnx.cn/js-tutorial-408201.html
$file=$_FILES['file'];
if($file['error']!=0){
echo json_encode(['code'=>0,'msg'=>'上傳失敗']);
exit;
}
$name=$file['name'];
$tmp_name=$file['tmp_name'];
$size=$file['size'];
$ext=pathinfo($name,PATHINFO_EXTENSION);
$new_name=date('Ymdhis',time()).'_'.md5(time()).'.'.$ext;
if(move_uploaded_file($tmp_name,'upload/'.$new_name)){
echo json_encode(['code'=>1,'pic_name'=>$new_name]);
exit;
}else{
echo json_encode(array('code'=>0,'msg'=>'上傳失敗_移動'));
exit;
}
本來layui文件上傳的，結果總是報接口錯誤，也不知道啥原因，整了一上午+一個中午 也沒有找到原因！群里問了也沒人回答，就放棄了，換成百度的wepupload！
Correcting teacher：天蓬老師Correction time：2019-04-10 10:41:33
Teacher's summary：layUI是近幾年, 國內比較流行的一個前端開發(fā)框架, 基本上是原生開發(fā), 但現(xiàn)在有越來越商業(yè)化的趨勢, 所以,使用的時候, 最好留一手, 多了解一些框架