应用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>

    原文作者:yang
    原文地址: https://segmentfault.com/a/1190000018732078
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞