1、编写index.html
<!DOCTYPE html>
<html>
<head>
<title>Upload Files using XMLHttpRequest - Minimal</title>
<script type="text/javascript" src="js/upload.js"></script>
</head>
<body>
<form name="form1" enctype="multipart/form-data" method="post" action="upload.php">
<div class="row">
<label for="fileToUpload">Select a File to Upload</label><br />
<input type="file" name="fileToUpload" id="fileToUpload" οnchange="fileUpload('fileToUpload','form1','fileid');"/>
</div>
<div id="fileName"></div>
<div id="fileSize"></div>
<div id="fileType"></div>
<div id="progressNumber"></div>
文件路径:<input type="text" name="fileid" id="fileid" value="" />
</form>
</body>
</html>
2、编写upload.php
<?php
//获取文件后缀名
function getExt($filename){
$array = explode('.', $filename);
$ext = array_pop($array);
return strtolower($ext);
}
//随机数
function randStr($length){
$chars="0123456789abcdefghijklmnopqrstuvwxyz"; //字符串
$string="";
for($i=0;$i<$length;$i++){
$string.=substr($chars, rand(0,strlen($chars)-1),1);
}
return $string;
}
function upFile(){
$files=&$_FILES['fileToUpload'];
//print_r($_FILES);exit;
if(!empty($files) && !is_uploaded_file($files['tmp_name'])){
return $this->status_data(-1,null,"未上传文件");
}
//print_r($this->datas);exit;
$ext=getExt($files['name']);
$imgExt=array('jpg','png','jpeg','gif');
if(in_array($ext,$imgExt)){
$cun='upload/picture/'.date('Y-m-d').'/';
}else{
$cun='upload/attach/'.date('Y-m-d').'/';
}
if(!is_dir($cun)){
mkdir($cun);
}
$t=time().randStr(6);
$file_ext=substr($files['name'],strrpos($files['name'],'.'));
$fiename=$t.$file_ext;
$putPath=$cun.$fiename;
$rs = move_uploaded_file($files['tmp_name'],$putPath);//上传图片
if($rs){
echo $_POST['fileid']."|".$putPath;
}else{
echo "error";
}
}
upFile();
?>
3、引用js
function fileUpload(filename,formname,fileid) {
var file = document.getElementById(filename).files[0];
if (file) {
var fileSize = 0;
if (file.size > 1024 * 1024)
fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';
else
fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB';
document.getElementById('fileName').innerHTML = 'Name: ' + file.name;
document.getElementById('fileSize').innerHTML = 'Size: ' + fileSize;
document.getElementById('fileType').innerHTML = 'Type: ' + file.type;
var fd = new FormData(document.forms.namedItem(formname));
fd.append("fileid", fileid);//返回时的图片显示在哪个div id里面
var xhr = new XMLHttpRequest();
xhr.upload.addEventListener("progress", uploadProgress, false);
xhr.addEventListener("load", uploadComplete, false);
xhr.addEventListener("error", uploadFailed, false);
xhr.addEventListener("abort", uploadCanceled, false);
xhr.open(document.forms.namedItem(formname).method, document.forms.namedItem(formname).action);
xhr.send(fd);
}
}
function uploadProgress(evt) {
if (evt.lengthComputable) {
var percentComplete = Math.round(evt.loaded * 100 / evt.total);
document.getElementById('progressNumber').innerHTML = percentComplete.toString() + '%';
}
else {
document.getElementById('progressNumber').innerHTML = 'unable to compute';
}
}
function uploadComplete(evt) {
if(evt.target.responseText){
var imageres = evt.target.responseText;
var imagearr = imageres.split("|");
var imageid = imagearr[0];
var imageurl = imagearr[1];
document.getElementById(imageid).value = imageurl;
}
}
function uploadFailed(evt) {
document.getElementById('error').innerHTML = 'Error';
}
function uploadCanceled(evt) {
document.getElementById('abort').innerHTML = 'Canceled';
}
对ie支持不是很好,js高手可自行修改兼容。