XHR2 调用接口上传文件
/**
* 异步上传文件
*/
$('#upload').on('change', function () {
// FormData用于管理表单数据的
var form=document.querySelector("#form1");
//formData对象 管理form表单
var formData=new FormData(form);
// 发送给服务器
var xhr=new XMLHttpRequest();
xhr.open('post','./02-formData.php');
//1-必须使用post方式
//2-切记不需要设置请求头，浏览器会自动设置要给合适的请求头
xhr.send(formData); //直接发送formData
xhr.onreadystatechange=function(){
if(xhr.readyState==4 && xhr.status==200){
var r=xhr.responseText;
}
}
})jQuery 也是可以的（内部仍然是使用的 XMLHttpRequest level 2）
/**
* 异步上传文件
*/
$('#upload').on('change', function () {
// 准备要上传的数据
var formData = new FormData(form)
formData.append('file', this.files[0])
// 发送 AJAX 请求，上传文件
$.ajax({
url: '/admin/upload.php',
contentType: false, //设置编码类型
processData: false, //设置传递值方式
data: formData,
type: 'post',
success: function (res) {
if (res.success) {
$('#image').val(res.data).siblings('.thumbnail').attr('src', res.data).fadeIn()
} else {
$('#image').val('').siblings('.thumbnail').fadeOut()
notify('上传文件失败')
}
}
})
})1、contentType:
(默认: "application/x-www-form-urlencoded") 发送信息至服务器时内容编码类型。默认值适合大多数情况。如果你明确地传递了一个content-type给 $.ajax() 那么他必定会发送给服务器（即使没有数据要发送）
2、processData
(默认: true) 默认情况下，通过data选项传递进来的数据，如果是一个对象(技术上讲只要不是字符串)，都会处理转化成一个查询字符串，以配合默认内容类型 "application/x-www-form-urlencoded"。如果要发送 DOM 树信息或其它不希望转换的信息，请设置为 false。
3、FormData
XMLHttpRequest Level 2添加了一个新的接口FormData.利用FormData对象,我们可以通过JavaScript用一些键值对来模拟一系列表单控件,我们还可以使用XMLHttpRequest的send()方法来异步的提交这个"表单".比起普通的ajax,使用FormData的最大优点就是我们可以异步上传一个二进制文件.
1.wangEditor 参考手册
-
基于javascript和css开发的 Web富文本编辑器， 轻量、简洁、易用、开源免费
-
源码：github.com/wangfupeng1988/wangEditor （欢迎 star）
设置内容
以下方式中，如果条件允许，尽量使用第一种方式，效率最高。
html 初始化内容
直接将内容写到要创建编辑器的<div>标签中
<div id="div1">
<p>初始化的内容</p>
<p>初始化的内容</p>
</div>
<script type="text/javascript" src="/wangEditor.min.js"></script>
<script type="text/javascript">
var E = window.wangEditor
var editor = new E('#div1')
editor.create()
</script>js 设置内容
创建编辑器之后，使用editor.txt.html(...)设置编辑器内容
<div id="div1">
</div>
<script type="text/javascript" src="/wangEditor.min.js"></script>
<script type="text/javascript">
var E = window.wangEditor
var editor = new E('#div1')
editor.create()
editor.txt.html('<p>用 JS 设置的内容</p>')
</script>追加内容
创建编辑器之后，可使用editor.txt.append('<p>追加的内容</p>')继续追加内容。
清空内容
可使用editor.txt.clear()清空编辑器内容
读取内容
可以html和text的方式读取编辑器的内容。
<div id="div1">
<p>欢迎使用 wangEditor 编辑器</p>
</div>
<button id="btn1">获取html</button>
<button id="btn2">获取text</button>
<script type="text/javascript" src="/wangEditor.min.js"></script>
<script type="text/javascript">
var E = window.wangEditor
var editor = new E('#div1')
editor.create()
document.getElementById('btn1').addEventListener('click', function () {
// 读取 html
alert(editor.txt.html())
}, false)
document.getElementById('btn2').addEventListener('click', function () {
// 读取 text
alert(editor.txt.text())
}, false)
</script>使用 textarea
wangEditor 从v3版本开始不支持 textarea ，但是可以通过onchange来实现 textarea 中提交富文本内容。
<div id="div1">
<p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p>
</div>
<textarea id="text1" style="width:100%; height:200px;"></textarea>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="../wangEditor.js"></script>
<script type="text/javascript">
var E = window.wangEditor
var editor = new E('#div1')
var $text1 = $('#text1')
editor.customConfig.onchange = function (html) {
// 监控变化，同步更新到 textarea
$text1.val(html)
}
editor.create()
// 初始化 textarea 的值
$text1.val(editor.txt.html())
</script>获取 JSON 格式的内容
可以通过editor.txt.getJSON获取 JSON 格式的编辑器的内容，v3.0.14开始支持，示例如下
<div id="div1">
<p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p>
<img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top_ca79a146.png" style="max-width:100%;"/>
</div>
<button id="btn1">getJSON</button>
<script type="text/javascript" src="/wangEditor.js"></script>
<script type="text/javascript">
var E = window.wangEditor
var editor = new E('#div1')
editor.create()
document.getElementById('btn1').addEventListener('click', function () {
var json = editor.txt.getJSON() // 获取 JSON 格式的内容
var jsonStr = JSON.stringify(json)
console.log(json)
console.log(jsonStr)
})
</script>如果编辑器区域的 html 内容是如下：
<p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p>
<img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top_ca79a146.png" style="max-width:100%;"/>那么获取的 JSON 格式就如下：
[
{
"tag": "p",
"attrs": [],
"children": [
"欢迎使用 ",
{
"tag": "b",
"attrs": [],
"children": [
"wangEditor"
]
},
" 富文本编辑器" ] },
{ "tag": "img",
"attrs": [ {
"name": "src",
"value": "https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top_ca79a146.png" },
{
"name": "style",
"value": "max-width:100%;"
} ],
"children": [] },
{ "tag": "p",
"attrs": [],
"children": [
{
"tag": "br",
"attrs": [],
"children": []
}
]
}]2.本地图片预览
本地图片预览的意思就是当选择图片后在界面上显示当前选中图片，显示图片肯定就是用 <img> 标签，<img> 标签需要工作就必须有一个图片 URL，所以核心就是怎么给选中图片一个 URL。
正常我们在页面上用的 URL 都是类似 http://www.demo.com/a.jpg 这样的地址，也就是说是服务器上的一个图片，但是我们目前的情况，图片在选中过后，还没有上传到服务端，所以不可能有这种 URL 地址。
选择图片这个过程中，我们都是在浏览器本地（客户端）单机操作的，没有跟服务交互，所以这个需求应该是用 JavaScript 处理。
解决这一类的问题，核心把握：我现在在哪？我手头上有什么（能拿到什么）？我想要什么？
那么接下来就是解决：文件对象 -> URL
在了解了 HTML5 Web API 过后，我们知道 HTML5 提供了两种办法：
-
Object URL
-
FileReader
后续会详细学习到这些，我们这里通过 Object URL 解决目前这个问题，在页面中加入一段 JavaScript 代码：
// 当文件域文件选择发生改变过后，本地预览选择的图片
$('#feature').on('change', function () {
var file = this.files[0];
// 为这个文件对象创建一个 Object URL
var url = URL.createObjectURL(file);
// 将图片元素显示到界面上（预览）
$(this).siblings('.thumbnail').attr('src', url).fadeIn()
})3.限制上传文件的格式
在文件上传中使用 accept 属性，本例中的输入字段可以接受 GIF 和 JPEG 两种图像：
如果不限制图像的格式，可以写为：accept="image/*"
<form>
<input type="file" name="pic" id="pic" accept="image/gif, image/jpeg" />
</form>4.初始化时间
由于 <input type="datetime-local"> 标签的 value 属性要求是一个 yyyy-MM-ddThh:mm 格式的字符串，原生 JavaScript 格式化时间特别麻烦，我们可以通过社区提供的一个开源库 moment.js 解决。
// 发布时间初始值
//moment(时间).format('格式')；
//Y年 M月 D日 h时 m分 s秒
$('#created').val(moment().format('YYYY-MM-DDTHH:mm'))5. JqueryPagination 分页插件
JqueryPagination是个简单轻量级的分页插件，使用起来很容易，只要初始化一个实例，并设置总数量、翻页回调函数、其它参数就可以实现无刷新分页功能了
1 首先引入相关js文件：
<link href="Scripts/pagination.css" rel="stylesheet" type="text/css" />
<script src="../Scripts/jquery-1.7.2.min.js" type="text/javascript"></script> // 个人发现插件对1.4版不支持
<script src="Scripts/jquery.pagination.js" type="text/javascript"></script>2 编写html代码，在页面添加一个div
<div id="pagination">
</div>3添加javascript 代码，实例化分页插件
$(function () {
var pageCount=50;
//分页总数量
// $("#pagination").pagination(pageCount);
//简单初始化方法
$("#pagination").pagination(pageCount,
//分布总数量，必须参数
{
callback: PageCallback,
//PageCallback() 为翻页调用次函数。
prev_text: "« 上一页",
next_text: "下一页 »",
items_per_page:10,
num_edge_entries: 2,
//两侧首尾分页条目数
num_display_entries: 10,
//连续分页主体部分分页条目数
current_page: 0,
//当前页索引
link_to: "?id=__id__"
//分页的js中会自动把"__id__"替换为当前的数。0
}); });
function PageCallback(page_index,jq){
$.ajax({
type: "POST",
dataType: "text",
url: '后台处理地址',
//提交到一般处理程序请求数据
//提交两个参数：pageIndex(页面索引)，pageSize(显示条数)
data: "pageIndex=" + (pageIndex) + "&pageSize=" + pageSize,
success: function(data) {
//后台服务返回数据，重新加载数据
}
}); }4 插件pagination()方法参数
| 参数名 | 描述 | 参数值 |
|---|---|---|
| maxentries | 总条目数 | 必选参数，整数 |
| items_per_page | 每页显示的条目数 | 可选参数，默认是10 |
| num_display_entries | 连续分页主体部分显示的分页条目数 | 可选参数，默认是10 |
| current_page | 当前选中的页面 | 可选参数，默认是0，表示第1页 |
| num_edge_entries | 两侧显示的首尾分 | 可选参数，默认是0 |
| link_to | 分页的链接 | 字符串，可选参数，默认是"#" |
| prev_text | “前一页”分页按钮上 | 字符串参数，可选，默认是"Prev" |
| next_text | “下一页”分页按钮上显示的文字 | 字符串参数，可选，默认是"Next" |
| ellipse_text | 省略的页数用什么文字表示 | 可选字符串参数，默认是"…" |
| prev_show_always | 是否显示“前一页”分页按钮 | 布尔型，可选参数，默认为true，即显示“前一页”按钮 |
| next_show_always | 是否显示“下一页”分页按钮 | 布尔型，可选参数，默认为true，即显示“下一页”按钮 |
| callback | 回调函数 | 当点击链接的时候此函数被调用，此函数接受两个参数，新一页的id和pagination容器（一个DOM元素）。如果回调函数返回false，则pagination事件停止执行 |
| load_first_page | 初始化时是否执行回调函数 | 如果为true则当插件初始化时回调函数被执行。如果你通过ajax来显示内容，那么在初始化分页插件时应把它设置为false;默认值: true |
5- 插件其它方法
// 自定义事件触发分页
// 跳到第3页
$("#pagination").trigger('setPage', [2]);
// 下一页
$("#pagination").trigger('nextPage');
// 上一页
$("#pagination").trigger('prevPage');后台代码就贴出来了，一般是返回json格式的数据到前面处理。总结：JqueryPagination使用简单，只需要设置参数和回调函数就可以用，通过回调函数处理 翻页触发的事件，比较灵活。
扫一扫
1099
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
