您当前的位置： 首页 > 学无止境 > CSS3|Html5 网站首页CSS3|Html5
原生Ajax方式实现图片预览及上传（html5特性）
发布时间：2016-08-14 16:40:59编辑：雪饮阅读（）
今天雪饮给大家分享的是带预览图的文件上传。主要利用了html5的FormData属性、原生ajax，html5的fileapi。
demo环境：phpstudy-php5.3
前端：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script type="text/javascript">
function selfile(){
var pic=document.getElementsByTagName('input')[0].files[0];
var debug=document.getElementById("debug");
var cont='';
cont+='文件名称:'+pic.name+'<br/>';
cont+='文件大小:'+pic.size+'<br/>';
debug.innerHTML=cont;
var tmpimg=document.createElement('img');
tmpimg.src=window.URL.createObjectURL(pic);//把二进制对象直接读成浏览器显示的资源
document.getElementsByTagName('body')[0].appendChild(tmpimg);
document.getElementById("up").style.display="block";
}
function up(){
//创建formdata对象
var fd=new FormData();
//获取文件对象
var pic=document.getElementsByTagName('input')[0].files[0];
//把文件内容追加到表单数据里
fd.append(0,pic);//0为文件数组files中第一个文件的键名字，后端取该文件如：$_FILES[0][tmp_name]
var xhr=new XMLHttpRequest();
xhr.open('POST','02.php',true);//ajax提交虽然为post，但后端中要在files数组中才能获取，若获取post信息则为空数组
xhr.onreadystatechange=function (){
if(this.readyState==4){
alert(this.responseText);
}
}
xhr.send(fd);
}
</script>
</head>
<body>
选择并预览图片:<input type="file" accept="image/jpeg" name="pic" onChange="selfile();"/>
<div id="debug"></div>
<input type="button" onClick="up();" value="上传该图片" id="up" style="display:none"/>
</body>
</html>
后端：02.php
<?php
move_uploaded_file($_FILES[0]["tmp_name"],$_SERVER['DOCUMENT_ROOT']."/xy/".$_FILES[0]["name"]);
echo "上传成功！";
?>
效果预览：
关键字词：ajax,html5,预览,上传