html5+php如何实现ajax上传文件
【html5代码部分】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
Remove this if you use the .htaccess -->
<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" />
<!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
<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>
<html lang="en">
<head>
<meta charset="utf-8" />
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
Remove this if you use the .htaccess -->
<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" />
<!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
<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);
}
}
}
}
* @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);
}
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);
}