PHPAjax實(shí)現(xiàn)圖片異步上傳預(yù)覽.doc

《PHPAjax實(shí)現(xiàn)圖片異步上傳預(yù)覽.doc》由會(huì)員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在工程資料-天天文庫(kù)。

1、PHP+Ajax實(shí)現(xiàn)圖片異步上傳預(yù)覽說道上傳圖片，大家并不陌生，不過，在以后開發(fā)的項(xiàng)目中，可能并不會(huì)讓你使用提交刷新頁(yè)面式的上傳圖片，比如上傳頭像，按照常理，肯定是在相冊(cè)選擇照片之后，確認(rèn)上傳，而肯定不會(huì)通過form表單，點(diǎn)擊submit刷新式上傳。我為大家介紹兩種異步非刷新式上傳圖片+圖片預(yù)覽：第一種，通過現(xiàn)成的uploadfy插件進(jìn)行上傳，網(wǎng)上好多實(shí)例。不過我重點(diǎn)為大家介紹的是第二種，通過Ajax上傳圖片。因?yàn)槭褂胾ploadfy插件需要設(shè)備支持swf格式的Flash，所以對(duì)大多數(shù)手機(jī)來(lái)說，第一種方式就沒辦

2、法使用了。首先，我先跟大家說一下上傳原理：通過js控制file文本域，當(dāng)選擇照片之后，通過Ajax異步提交form表單，然后將圖片的位置作為返回值，使用js把img的src屬性設(shè)置為返回值。1、首先，在網(wǎng)上下載jQuery.form.js包和jquery-2.0.3.min.js包，注意：引用的時(shí)候要把jquery-2.0.3.min.js放在前面，因?yàn)閖Query.form.js里面涉及到j(luò)Query方法，如果引用順序不對(duì)，js會(huì)報(bào)錯(cuò)。構(gòu)建HTML代碼：

3、etacharset="utf-8">

4、dy>2、寫Ajax方法：$(function(){varfiles=$(".files");$("#fileupload").wrap("");$("#fileupload").change(function(){$("#myupload").ajaxSubmit({dataType:'json',success:funct

5、ion(data){$("#pic").attr("src","files/"+data);},error:function(xhr){alert("上傳失敗");}});});});3、為了驗(yàn)證一下form表單是否action到action.php里，我們?cè)赼ction.php使用var_dump($_FILES);打印一下。通過firebug看看結(jié)果說明form表單已經(jīng)提交過來(lái)，然后在action使用move_uploaded_file函數(shù)將文件移到你想要移動(dòng)的位置。下面是詳細(xì)的源碼：Inde.html

6、DOCTYPEHTML>

7、c">$(function(){varfiles=$(".files");$("#fileupload").wrap("");$("#fileupload").change(function(){$("#myupload").ajaxSubmit({dataType:'json',

8、success:function(data){$("#pic").attr("src","files/"+data);},error:function(xhr){alert("上傳失敗");}});});});Action.php