利用jquery中的ajax在實現圖片的上傳及預覽（及富文字的使用）

jQuery Ajax · 發表 2019-04-01 20:43:08

摘要： <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title>Add new p...

<!DOCTYPE html>

<head>

<title>Add new post « Admin</title>

</head>

<body>

<?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"?>

$(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>

利用jquery中的ajax在實現圖片的上傳及預覽（及富文字的使用）

您可能也會喜歡…