一個偽ajax圖片上傳代碼實現示例
更新時間：2014年03月17日 16:44:46 作者：
這篇文章主要介紹了自己寫的一個偽ajax圖片上傳實現代碼,需要的朋友可以參考下
復制代碼 代碼如下:
<?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，執(zhí)行回調js函數。實現圖片回顯。后臺php的功能沒有完善。
相關文章
這篇文章主要介紹了如何利用Ajax實現上傳圖像,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2022-04-04
光標離開文本框，在本頁面的相應地方獲取數據庫中改值所對應的其他數據，相應的實現代碼如下，感興趣的朋友可以看看2014-08-08
這篇文章主要介紹了Ajax核心技術代碼,需要的朋友可以參考下2014-05-05
很多的新手朋友們不知道ajax如何處理返回json值，在本文將為大家詳細介紹下2013-09-09
ajax中文亂碼問題在中文中經常會出現這種問題，其實只要稍加注意就不會出現ajax中文亂碼這回事情了，接下來為大家詳細介紹下如何解決這類問題2013-04-04
AJAX即“Asynchronous Javascript And XML”（異步JavaScript和XML），是指一種創(chuàng)建交互式網頁應用的網頁開發(fā)技術。本文跟大家介紹JQuery中$.ajax()方法參數詳解，小伙伴們一起學習吧2015-10-10
最近二天。項目做完了。閑著沒事做就自己寫了一點東西。在寫的過程中。發(fā)現利用服務器的文本框去查找用戶的相關信息的時刻總要去刷新頁面。2009-06-06
本篇文章主要是對AJAX提交與FORM提交的區(qū)別進行了詳細的介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-02-02
AJAX全稱為"Asynchronous JavaScript and XML"（異步JavaScript和XML），Ajax不是一個技術，它實際上是幾種技術，每種技術都有其獨特這處，合在一起就成了一個功能強大的新技術。2010-06-06
回調函數，在請求完成后需要進行的操作：此處是把選中的checkbox去掉，接下來為大家詳細介紹下，感興趣的朋友可以參考下哈，希望對你有所幫助2013-04-04