<!-- /*最近学习了ajax,以前以为ajax主要用来做一些表单验证的,深入学习发现远不止这点,ajax不仅可以实现不刷新的情况下做表单验证,现在页面的的加载,文件的上传也都有ajax的用武之地.下面是一个ajax实现文件上传的小栗子.
需要注意的是,ajax上传文件跟一般的ajax发送请求有些不一样,发送请求的报文中不写请求头setRequestHeder,另外需要新建一个FormData对象,这个对象可以传进一个form表单元素作为参数,发送的时候就将这个FormData对象对象即可.
示例: var data = new FormData(document.querySelector('form'));*/ -->
//-----------------------------以下是示例代码-------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h2>上传图片并预览</h2>
<form action="">
<input name='icon' type="file">
</form>
<!-- 放一个img标签预览图片 -->
<img src="" alt="">
</body>
</html>
<!-- //导入jquery -->
<script src="./js/jquery-1.12.4.js"></script>
<script>
// **//1.原生的js实现**
document.querySelector('input').onchange = function() {
//创建异步对象
var xhr = new XMLHttpRequest();
//设置请求行(get请求数据写在url后面)
xhr.open('post', './upload.php');
//设置请求头(get请求可以省略,post不发送数据也可以省略)
// FormData 使用设置请求头
//注册回调函数,向服务器发送请求获得响应后发生
xhr.onload = function() {
console.log(xhr.responseText);
document.querySelector('img').src = xhr.responseText;
}
// **新建一个FormData,将form表单放进去作参数,向服务器发送数据
var data = new FormData(document.querySelector('form'));
xhr.send(data);
}
**//2.用jquery实现**
$(function() {
//给input标签 绑定change事件,当input上传文件时触发事件
$('input').on('change',function() {
// 新建FormData对象, 注意里面的参数是DOM对象,所以需要加索引从jquery对象转化为DOM
var formData = new FormData($('form')[0]);
$.ajax({
url: './upload.php',
type: 'post',
data: formData,
contentType: false, // 当有文件要上传时,设置成false
processData: false, // 是否序列化data属性,默认true
success: function(data) {
// 从后台返回的数据传给形参data,data的值是一个文件路径,赋给img标签的src属性
$('img').attr('src', data);
}
})
})
})
</script>
<!-- 这是后端的php代码 -->
<?php
<!-- 保存从客户端传过来的文件,前面的参数是临时储存的位置,后面的参数是实际要保存的路径 -->
move_uploaded_file($_FILES['icon']['tmp_name'],'./imgs/'.$_FILES['icon']['name']);
<!-- 将文件路径返回 -->
echo './imgs/'.$_FILES['icon']['name'];
?>