首页 > 云开发 > JavaScript > 正文

后台-系统设置-扩展变量-手机广告位-内容正文顶部

利用jquery中的ajax在实现图片的上传及预览(及富文本的使用)

JavaScript

<!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>

文章来源:segmentfault,作者:yang。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件至:william.shi#ucloud.cn(邮箱中#请改为@)进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容。
后台-系统设置-扩展变量-手机广告位-内容正文底部

本文标签

上传 图片 jQuery ajax

推荐文章

热门标签

    热门文章 最新文章 文章云

站内导航

全站搜索