一個偽ajax圖片上傳代碼實現(xiàn)示例

更新時間：2014年03月17日 16:44:46 作者：

這篇文章主要介紹了自己寫的一個偽ajax圖片上傳實現(xiàn)代碼,需要的朋友可以參考下

 
<?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> 

面向?qū)ο笏枷?，form提交到一個隱藏的iframe，執(zhí)行回調(diào)js函數(shù)。實現(xiàn)圖片回顯。后臺php的功能沒有完善。

您可能感興趣的文章:

相關(guān)文章

jquery ajax實現(xiàn)文件上傳功能實例代碼
這篇文章主要介紹了jquery ajax實現(xiàn)文件拖拽上傳功能的實例代碼,代碼簡單易懂，非常不錯，具有參考借鑒價值，需要的朋友可以參考下
2018-04-04
ajax返回的json內(nèi)容進(jìn)行排序使用sort()方法實現(xiàn)
關(guān)于ajax返回的json內(nèi)容進(jìn)行排序，主要使用sort()對數(shù)組的元素進(jìn)行排序，具體實現(xiàn)如下，感興趣的朋友可以參考下哈，希望對大家有所幫助
2013-07-07
深入理解ajax系列第一篇之XHR對象
ajax是asynchronous javascript and XML的簡寫，中文翻譯是異步的javascript和XML，這一技術(shù)能夠向服務(wù)器請求額外的數(shù)據(jù)而無須卸載頁面，會帶來更好的用戶體驗
2016-11-11
通過Ajax請求動態(tài)填充頁面數(shù)據(jù)的實例
今天小編就為大家分享一篇通過Ajax請求動態(tài)填充頁面數(shù)據(jù)的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-08-08
Ajax加載菊花loding效果
這篇文章主要介紹了Ajax加載菊花loding效果的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
2016-07-07
淺談Ajax相關(guān)及其優(yōu)缺點
最近在學(xué)習(xí)有關(guān) AJAX 的知識，上網(wǎng)查閱了一些有關(guān) AJAX 的資料，主要是有關(guān) AJAX的技術(shù)簡介及其優(yōu)缺點等。在這里，我想對我收集的資料做一些小小的總結(jié)，大部分資料都來自網(wǎng)上，本人在此只做分類總結(jié)，希望對和我一樣正在學(xué)習(xí) AJAX 的朋友有一定的幫助。
2015-06-06
AjaxFileUpload+Struts2實現(xiàn)多文件上傳功能
這篇文章主要介紹了AjaxFileUpload+Struts2實現(xiàn)多文件上傳功能,需要的朋友可以參考下
2017-09-09
ajax無刷新評論功能
這篇文章主要為大家詳細(xì)介紹了ajax無刷新評論功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-02-02
ASP小偷程序如何利用XMLHTTP實現(xiàn)表單的提交
ASP小偷程序如何利用XMLHTTP實現(xiàn)表單的提交...
2006-07-07
簡單實現(xiàn)Ajax無刷新分頁效果
這篇文章主要為大家詳細(xì)介紹了簡單實現(xiàn)Ajax無刷新分頁效果的代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-05-05