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

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

【html5代码部分】

html5 基于拖拽的文件上传

/*外部刨削样式*/

.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;}

【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);      }