html5+php如何实现ajax上传文件

来源：互联网发布：校园网络结构图编辑：程序博客网时间：2024/05/19 09:50

html5+php如何实现ajax上传文件

【html5代码部分】

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>html5 基于拖拽的文件上传</title>
<meta name="description" content="" />
<meta name="author" content="Administrator" />
<meta name="viewport" content="width=device-width; initial-scale=1.0" />

<link rel="shortcut icon" href="/favicon.ico" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<style type="text/css">
/*外部刨削样式*/
.wrapper{border: 0px solid red; width: 600px; height: 500px; margin: 0px auto;}

/*文件图片拖拽区样式*/
.drag_Box{ border: 1px solid blue; width: 100%; height: 450px;}

/*显示进度条样式*/
.progress_Bar{border: 1px solid #256842;width: 100%; height: 48px;}
</style>
<script type="text/javascript" src="jquery-1.8.2.js"></script>
<script type="text/javascript" src="mydemo.js"></script>
</head>
<body>
<div class="wrapper">

<div class="drag_Box" id="dropBox">
</div>

<div class="progress_Bar">
</div>
</div>
</body>
</html>

【mydemo.js js代码部分】

/**
* @author Administrator
* 1-- 找到对象
* 2-- 需要html 的拖拽api 和 fromFate Api
*
* 创建对象后给对象动态添加拖进事件
*
*
*/
window.onload = function() {
var oDropBox = document.getElementById('dropBox');
//拖进事件
oDropBox.addEventListener('dragover', function(e) {
e.preventDefault();
oDropBox.style.border="1px solid red";
}, false);
//扔完后事件
oDropBox.addEventListener('drop', handleDrop, false);

function handleDrop(e) {
e.preventDefault();
var fileList = e.dataTransfer.files;　　//获取拖拽文件
fileType = fileList[0].type;
　　　　 oImg = document.createElement('img');
oup= document.createElement('button');
oup.setAttribute('type','button');
oup.innerHTML="上传";
oup.addEventListener('click',upload,false);
reader = new FileReader();
reader.onload = function(e){
oImg.src = this.result;
oDropBox.innerHTML = '';
oDropBox.appendChild(oImg);
oDropBox.appendChild(oup);
}
reader.readAsDataURL(fileList[0]);

//当点击的时候上传按钮的时候就执行 ajax 开始上传
function upload(){
//问题在这个位置
//测试: 当点击上传按钮时，已经执行了该方法。问题是: ajax 文件上传没有吧formData中的数据上传到服务器
var xhr = new XMLHttpRequest();
var fd = new FormData();
xhr.open('POST', 'http://127.0.0.1/html5_uload_demo/upload.php?'+Math.random(), true);
xhr.setRequestHeader("X-Requested-With","XMLHttpHequest");
xhr.setRequestHeader("content-length",fileList[0].size);
xhr.onreadystatechange=_callback;
fd.append('file',fileList[0]);
xhr.send(fd);
}
function _callback(){
if(xhr.readyState == 4 && xhr.status == 200){
alert('dd');
alert(xhr.responseText);
}
}

}
}

【upload.php php代码部分】

// 执行上传
if($_FILES['file']['error']==0){
$uploadFileName=$_FILES['file']['name'];
$uploadFileTemp=$_FILES['file']['tmp_name'];
$uploadFileTrue='/html5_uload_demo/upload/';
move_uploaded_file($uploadFileTemp,$uploadFileTrue.$uploadFileName);
}

0 0