利用jquery中的ajax在实现图片的上传及预览（及富文本的使用）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>Add new post « Admin</title>
<link rel="stylesheet" href="../static/assets/vendors/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="../static/assets/vendors/font-awesome/css/font-awesome.css">
<link rel="stylesheet" href="../static/assets/vendors/nprogress/nprogress.css">
<link rel="stylesheet" href="../static/assets/css/admin.css">
<script src="../static/assets/vendors/nprogress/nprogress.js"></script>
</head>
<body>
<script>NProgress.start()</script>
<div class="main">
<?php include_once "public/_navbar.php"?>
<div class="container-fluid">
<div class="page-title">
<h1>写文章</h1>
</div>
<!-- 有错误信息时展示 -->
<!-- <div class="alert alert-danger">
<strong>错误！</strong>发生XXX错误
</div> -->
<form id="dataForm" class="row">
<div class="col-md-9">
<div class="form-group">
<label for="title">标题</label>
<input id="title" class="form-control input-lg" name="title" type="text" placeholder="文章标题">
</div>
<div class="form-group">
<label for="content">标题</label>
<textarea id="content" class="form-control input-lg" name="content" cols="30" rows="10" placeholder="内容"></textarea>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="slug">别名</label>
<input id="slug" class="form-control" name="slug" type="text" placeholder="slug">
<p class="help-block">https://zce.me/post/<strong>slug</strong></p>
</div>
<div class="form-group">
<label for="feature">特色图像</label>
<!-- show when image chose -->
<img id="showPic" class="help-block thumbnail" style="display: none">
<input id="feature" class="form-control" name="feature" type="file">
</div>
<div class="form-group">
<label for="category">所属分类</label>
<select id="category" class="form-control" name="category">
<option value="1">未分类</option>
<option value="2">潮生活</option>
</select>
</div>
<div class="form-group">
<label for="created">发布时间</label>
<input id="created" class="form-control" name="created" type="datetime-local">
</div>
<div class="form-group">
<label for="status">状态</label>
<select id="status" class="form-control" name="status">
<option value="drafted">草稿</option>
<option value="published">已发布</option>
</select>
</div>
<div class="form-group">
<input type="button" id="btn_save" value="保存" class="btn btn-primary">
</div>
</div>
</form>
</div></div>
<?php
$current_page = "post-add";
?>
<?php include_once "public/_aside.php"?>
<script src="../static/assets/vendors/jquery/jquery.js"></script>
<script src="../static/assets/vendors/bootstrap/js/bootstrap.js"></script>
<script>NProgress.done()</script>
<!-- 引入富文本插件 -->
<script src="../static/assets/vendors/ckeditor/ckeditor.js"></script>
<script>
$(function(){
$("#feature").on("change",function(){
var file = this.files[0];
// new一个formDddata的实例
var data = new FormData();
// 使用XMLHttpRequest2.0中的FromData对象处理数据 因为图像是二进制的不可见
data.append("file",file);
$.ajax({
type:"POST",
url:"api/_upFileData.php",
data:data,
contentType:false, /* 防止设置请求头 因为formData 是不可以设置请求头的 */
processData:false, /* 防止进行格式编码 */
success:function(res){
// console.log(res);
if(res.code==1){
$("#showPic").attr("src",res.src).show();
}
}
});})
// 富文本初始化 content是textarea的id
CKEDITOR.replace('content');
$("#btn_save").on("click",function(){
CKEDITOR.instances.content.updateElement();//把编译器里面的内容更新到文本域当中
var data = $("#dataForm").serialize();
$.ajax({
type:"POST",
data:data,
url:"api/_getpost.php",
success:function(res){
console.log(res);
}
})})
})
</script>
</body>
</html>
相关推荐
结束数据方法的参数，该如何定义？-- 集合为自定义实体类中的结合属性，有几个实体类，改变下标就行了。<input id="add" type="button" value="新增visitor&quo