一个伪ajax图片上传代码实现示例

发布时间：2020-12-14 23:01:40 所属栏目：资源来源：网络整理

导读：复制代码代码如下: ?php if($_FILES){ ? script window.parent.ajaxUploadPicture.uploadCallback('http://img0.bdstatic.com/img/image/5099213b07eca8065380ce7f75e95dda144ad348269.jpg'); /script ?php die; } ? !DOCTYPE html html head script ajaxUp

复制代码代码如下:

 
<?php 
if($_FILES){ 
?> 
<script> 
window.parent.ajaxUploadPicture.uploadCallback('http://img0.bdstatic.com/img/image/5099213b07eca8065380ce7f75e95dda144ad348269.jpg'); 
</script> 
<?php 
die; 
} 
?> 
<!DOCTYPE html> 
<html> 
<head> 
<script> 


ajaxUploadPicture = { $o1:'' }; 


ajaxUploadPicture.ajaxUploadFile = function ($o){ 
this.$o1 = $o; 
var $iframe = document.createElement('iframe'); 
$iframe.style.display = 'none'; 
$iframe.name = 'iframe'; 
$iframe.id = 'iframe'; 
document.body.appendChild($iframe); 


var $form = document.createElement("form"); 
$form.method = "post"; 
$form.enctype = "multipart/form-data"; 
$form.action = ""; 
$form.target = 'iframe'; 
$newO = $o.cloneNode(); 
$form.appendChild($newO); 
$form.submit(); 
} 
ajaxUploadPicture.uploadCallback = function ($url){ 

$pic = document.createElement('img'); 
$pic.width = "200"; 
$pic.height = "150"; 
$pic.src = $url; 

if(document.getElementById('picshow') == null){ 
$div = document.createElement("div"); 
$div.id = 'picshow'; 
this.$o1.parentNode.insertBefore($div,this.$o1.nextSibling); 
}else{ 
$div = document.getElementById('picshow'); 
} 
$div.innerHTML = ''; 
$div.appendChild($pic); 
}; 
</script> 
</head> 
<body> 
<input type="file" name="file" onchange = "ajaxUploadPicture.ajaxUploadFile(this);"> 
</body> 
</html> 

面向对象思想，form提交到一个隐藏的iframe，执行回调js函数。实现图片回显。后台php的功能没有完善。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!