https://www.cnblogs.com/emrys5/p/ueditor-upload-img.html
1 提交表单
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>ueditor demo</title>
</head>
<body>
<form action="data/server.php" method="post">
<label for="name">姓名：</label>
<input type="text" name="username" id="name">
<!-- 加载编辑器的容器 -->
<label for="content">编辑内容：</label>
<script id="container" name="content" type="text/plain">
这里写你的初始化内容
</script>
<input type="submit" value="提交">
</form>
<!-- 配置文件 -->
<script type="text/javascript" src="ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="ueditor.all.js"></script>
<!-- 实例化编辑器 -->
<script type="text/javascript">
var editor = UE.getEditor('container');
</script>
</body>
</html>
php处理
<?php
header("content-type:text/html;charset=utf-8");
$username=$_POST['username'];
$content=$_POST['content'];
echo "$username+$content";
?>
添加图书
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=0.9, user-scalable=no">
<!--<base target="_blank">-->
<meta charset="UTF-8">
<title>BOLALA</title>
<link href="img/icon.ico" rel="icon" type="image">
<link rel="stylesheet" href="scss/bootstrap.css">
<link rel="stylesheet" href="scss/bll-reset.css">
<link rel="stylesheet" href="scss/bll-grid.css">
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div class="header container-fluid">
</div>
<div class="main container">
<div class="row">
<div class="col-8 mx-auto">
<form action="data/insert-ok.php" method="post">
<label for="lang">语言：</label>
<div class="form-group">
<select class="form-control" name="language" id="lang">
<option>PHP</option>
<option>javaScript</option>
<option>C++</option>
<option>node.js</option>
<option>C</option>
<option>python</option>
</select>
</div>
<div class="form-group">
<label for="books">书名：</label>
<input type="text" class="form-control" name="books" placeholder="书名" id="books">
</div>
<div class="form-group">
<label for="syn">简介：</label>
<input type="text" class="form-control" name="syn" placeholder="简介" id="syn">
</div>
<label for="content">详情内容：</label>
<script id="container" name="content" type="text/plain"></script>
<label for="picture" class="mt-3">封面图片：</label>
<script type="text/plain" id="editorupload"></script>
<input type="text" id="picture" name="image" style="width:400px;margin-bottom: 10px;"/>
<input type=button value="上传图片" onClick="upImage();">
<input type="submit" class="btn btn-danger btn-block" value="提交">
</form>
</form>
</div>
</div>
</div>
<div class="footer"></div>
<script src="js/jquery-1.7.1.js"></script>
<!--配置文件-->
<script type="text/javascript" src="UEditor/ueditor.config.js"></script>
<!--编辑器文件-->
<script type="text/javascript" src="UEditor/ueditor.all.js"></script>
<!--实例化编辑器-->
<script type="text/javascript">
$(".header").load("data/header.html");
var editor = UE.getEditor('container');
//实例化编辑器
var ueditorupload = UE.getEditor('editorupload',
{
autoHeightEnabled: false
});
ueditorupload.ready(function () {
ueditorupload.hide();//隐藏编辑器
//监听图片上传
ueditorupload.addListener('beforeInsertImage', function (t, arg) {
$("#picture").attr("value", arg[0].src);
// alert('图片地址'+arg[0].src);
});
ueditorupload.addListener('afterUpfile', function (t, arg) {
$("#picture").attr("value", arg[0].src);
//alert('文件地址：'+arg[0].url);
});
/* 文件上传监听
* 需要在ueditor.all.min.js文件中找到
* d.execCommand("insertHtml",l)
* 之后插入d.fireEvent('afterUpfile',b)
*/
});
//弹出图片上传的对话框
function upImage() {
var myImage = ueditorupload.getDialog("insertimage");
myImage.open();
}
//弹出文件上传的对话框
function upFiles() {
var myFiles = ueditorupload.getDialog("attachment");
myFiles.open();
}
</script>
</body>
</html>
php处理
<?php
header("content-type:text/html;charset=utf-8");
$conn=mysqli_connect(
"localhost",
"root",
"",
"jq-book");
$sql='SET NAMES UTF8';
$result=mysqli_query($conn, $sql);
$language=$_POST['language'];
$books=$_POST['books'];
$syn=$_POST['syn'];
$content=$_POST['content'];
$date=date('Y-m-d');
$image=$_POST['image'];
$sql="INSERT INTO `book-info` (`id`, `language`, `book`, `syn`, `detail`, `date`, `image`) VALUES (NULL, '$language', '$books', '$syn', '$content', '$date', '$image');";
$insert=mysqli_query($conn,$sql);
if ($result){
echo "<script>alert('添加成功');window.location.href='../insert.html'</script>";
}else{
echo "<script>alert('添加失败');window.location.href='../index.html'</script>";
}
修改图书
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=0.9, user-scalable=no">
<!--<base target="_blank">-->
<meta charset="UTF-8">
<title>BOLALA</title>
<link href="img/icon.ico" rel="icon" type="image">
<link rel="stylesheet" href="scss/bootstrap.css">
<link rel="stylesheet" href="scss/bll-reset.css">
<link rel="stylesheet" href="scss/bll-grid.css">
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div class="header container-fluid">
</div>
<div class="main container">
<div class="row">
<div class="col-8 mx-auto">
<form action="data/handle-update.php" method="post">
<input type="hidden" name="id" id="bookid">
<label for="lang">语言：</label>
<div class="form-group">
<select class="form-control" name="language" id="lang">
<option>PHP</option>
<option>javaScript</option>
<option>C++</option>
<option>node.js</option>
<option>C</option>
<option>python</option>
</select>
</div>
<div class="form-group">
<label for="books">书名：</label>
<input type="text" class="form-control" name="books" placeholder="书名" id="books">
</div>
<div class="form-group">
<label for="syn">简介：</label>
<input type="text" class="form-control" name="syn" placeholder="简介" id="syn">
</div>
<label for="content">详情内容：</label>
<script id="container" name="content" type="text/plain"></script>
<label for="picture" class="mt-3">封面图片：</label>
<script type="text/plain" id="editorupload"></script>
<input type="text" id="picture" name="image" style="width:400px;margin-bottom: 10px;"/>
<input type=button value="上传图片" onClick="upImage();">
<input type="submit" class="btn btn-danger btn-block" value="提交">
</form>
</div>
</div>
</div>
<div class="footer"></div>
<script src="js/jquery-1.7.1.js"></script>
<!--配置文件-->
<script type="text/javascript" src="UEditor/ueditor.config.js"></script>
<!--编辑器文件-->
<script type="text/javascript" src="UEditor/ueditor.all.js"></script>
<!--实例化编辑器-->
<script type="text/javascript">
$(".header").load("data/header.html");
var id = decodeURI(location.search.substring(1).split("=")[1]);
$("#bookid").val(id);
console.log(id);
$.ajax({
url: "data/update-ok.php",
data: {id: id},
async: false, //同步方式
type: "GET",
success: function (data) {
window.data = JSON.parse(data)[0];
}
});
var language = data.language,
book = data.book,
syn = data.syn,
detail = data.detail,
image = data.image;
var editor = UE.getEditor('container');
//实例化编辑器
editor.ready(function () {
editor.setContent(detail);
});
var ueditorupload = UE.getEditor('editorupload',
{
autoHeightEnabled: false
});
ueditorupload.ready(function () {
ueditorupload.hide();//隐藏编辑器
//监听图片上传
ueditorupload.addListener('beforeInsertImage', function (t, arg) {
$("#picture").attr("value", arg[0].src);
console.log(arg);
// alert('图片地址'+arg[0].src);
});
ueditorupload.addListener('afterUpfile', function (t, arg) {
$("#picture").attr("value", arg[0].src);
console.log(arg);
// [{src:""},{src:""}]
//alert('文件地址：'+arg[0].url);
});
/* 文件上传监听
* 需要在ueditor.all.min.js文件中找到
* d.execCommand("insertHtml",l)
* 之后插入d.fireEvent('afterUpfile',b)
*/
});
//弹出图片上传的对话框
function upImage() {
var myImage = ueditorupload.getDialog("insertimage");
myImage.open();
}
//弹出文件上传的对话框
function upFiles() {
var myFiles = ueditorupload.getDialog("attachment");
myFiles.open();
}
// 修改语言
$("option").each(function (i,item) {
if ($(item).text()==language){
$(item).prop("selected",true);
}
});
// 修改书名
$("#books").val(book);
// 修改简介
$("#syn").val(syn);
//修改图片地址
$("#picture").val(image);
</script>
</body>
</html>
php处理
<?php
header("content-type:text/html;charset=utf-8");
$conn=mysqli_connect(
"localhost",
"root",
"",
"jq-book");
$sql='SET NAMES UTF8';
$result=mysqli_query($conn, $sql);
$id=$_POST['id'];
$language=$_POST['language'];
$books=$_POST['books'];
$syn=$_POST['syn'];
$content=$_POST['content'];
$date=date('Y-m-d');
$image=$_POST['image'];
$sql="UPDATE `book-info` SET
`book` = '$books',
`syn` = '$syn',
`detail` = '$content',
`image` = '$image'
WHERE `book-info`.`id` = $id;";
$insert=mysqli_query($conn,$sql);
if ($result){
echo "<script>alert('添加成功');window.location.href='../more.html'</script>";
}else{
echo "<script>alert('添加失败');window.location.href='../index.html'</script>";
}
