js動態(tài)創(chuàng)建上傳表單通過iframe模擬Ajax實現(xiàn)無刷新

更新時間：2014年02月20日 09:46:22 作者：

這篇文章主要介紹了js動態(tài)創(chuàng)建上傳表單通過iframe模擬Ajax無刷新的具體實現(xiàn),需要的朋友可以參考下

 
<script> 
window.onload=function(){ 
upfile('file.php'); 
} 


/* 
** url 路徑 
**/ 
function upfile(url){ 
//創(chuàng)建iframe 
var iframe = document.createElement("iframe"); 
document.body.appendChild(iframe); 
iframe.id = 'iframeName'; 
iframe.name = 'iframeName'; 
iframe.style.display = 'none'; 
//創(chuàng)建form 
var turnForm = document.createElement("form"); 
document.body.appendChild(turnForm); 
turnForm.method = 'post'; 
turnForm.action = url; 
turnForm.encoding = "multipart/form-data"; 
turnForm.name = 'formNamer'; 
turnForm.target = 'iframeName'; 
//創(chuàng)建隱藏表單 
var newElement = document.createElement("input"); 
newElement.setAttribute("name","inputname"); 
newElement.setAttribute("type","file"); 
newElement.setAttribute("value",''); 
turnForm.appendChild(newElement); 
} 

//form提交 
function formSubmit() { 
//var res = document.formNamer.inputname.value; 
document.formNamer.submit(); 
} 

//返回值 
function callback(result){ 
//window.parent.document.getElementById('iframeName').style.display = 'block'; 通過iframe 查看后臺數(shù)據(jù) 
if(result['error'] == 0){ 
document.getElementById('test').src= result['img'][1]+'/'+result['img'][2]; 
}else if(result['error'] == 1){ 
alert(result['meg']); 
}else if(result['error'] == 2){ 
alert(result['meg']); 
}else if(result['error'] == 3){ 
alert(result['meg']); 
}else if(result['error'] == 4){ 
alert(result['meg']); 
}else{ 
alert(result['meg']); 
} 

} 

</script> 

<a href="javascript:formSubmit()">上傳</a> 
<img src="http://blog.163.com/zhwxl_zyx/blog/img/pasic.jpg" id="test" width="200" height="200"> 

file.php

復(fù)制代碼代碼如下:

 
<?php 
header("content-Type: text/html; charset=Utf-8"); 

if(@is_uploaded_file($_FILES['inputname']['tmp_name'])){ 

$f = $_FILES['inputname']; 
$name = $f["name"]; 
$size = $f["size"]; 
$type = $f["type"]; 
$fileName = $f["tmp_name"]; 

switch ($type) { 
case 'image/jpg':$okType = true; 
break; 

case 'image/jpeg':$okType = true; 
break; 

case 'image/png':$okType = true; 
break; 

case 'image/gif':$okType = true; 
break; 
} 

if($okType){ 
$error = $f["error"]; 
echo '文件名稱:'.$name.'<br>'; 
echo '文件類型:'.$type.'<br>'; 
echo '文件大小:'.round($size/1024).'K<br>'; 
echo '文件臨時存放路徑:'.$fileName.'<br>'; 

$fileDir = dirname(__FILE__).'/img/upfile'.time().$name; 
$img = explode('/',$fileDir); 

move_uploaded_file($fileName, $fileDir); 

$data = array(); 
$data['img'] = $img; 
$data['name'] = $name; 
$data['type'] = $type; 
$data['size'] = $size; 
$data['filename'] = $fileName; 
$data['fileDir'] = $fileDir; 

if($error==0){ 
/*echo '上傳成功!'; 
echo '預(yù)覽:'; 
echo "<img src="http://blog.163.com/zhwxl_zyx/blog/.$img[1].'/'.$img[2]." width='200' height='200'><br>"; 
echo '文件名稱'.$img[2];*/ 
$data['error'] = 0; 
exit("<script>parent.callback(".json_encode($data).");</script>"); 

}elseif($error==1){ 
$data['error'] = 1; 
$data['meg'] = '超過了文件大小，在php.ini文件中設(shè)置'; 
exit("<script>parent.callback(".json_encode($data).");</script>"); 
}elseif ($error==2){ 
$data['error'] = 2; 
$data['meg'] = '超過了文件的大小MAX_FILE_SIZE選項指定的值'; 
exit("<script>parent.callback(".json_encode($data).");</script>"); 
}elseif ($error==3){ 
$data['error'] = 3; 
$data['meg'] = '文件只有部分被上傳'; 
exit("<script>parent.callback(".json_encode($data).");</script>"); 
}elseif ($error==4){ 
$data['error'] = 4; 
$data['meg'] = '沒有文件被上傳'; 
exit("<script>parent.callback(".json_encode($data).");</script>"); 
}else{ 
$data['meg'] = '上傳文件大小為0'; 
exit("<script>parent.callback(".json_encode($data).");</script>"); 
} 

} 
}else{ 
$data['error'] = 4; 
$data['meg'] = '沒有文件被上傳'; 
exit("<script>parent.callback(".json_encode($data).");</script>"); 
} 
?> 