PHP JQ 異步上傳并立即顯示圖片

提交頁面：

<! DOCTYPE html>

< html>

< head>

< meta charset ="GB2312" >

< title> Insert title here </title >

< script type ="text/javascript" src= "jquery.js"></ script >

< script type ="text/javascript" >

$(document).ready( function (){

      $( "#i_1" ).load( function(){

             var url = $("#i_1" ).contents().find( "#pic").html();

             if (url != null){

                  $( "#tag_img" ).attr("src" ,url);

            }

      });

});

</ script>

</ head>

< body>

< img id= "tag_img" src = "" />

< form enctype ="multipart/form-data" action= "upload_pic.php" method ="post" target= "upload_target">

     <input type= "file" name ="img" class= "file" value ="" />

     <input type= "submit" name ="uploadimg" value= "上傳" />

</ form>

< iframe id= "i_1" name = "upload_target"></ iframe >

</ body>

</ html>

重點：

1.form中的axtion="處理圖片的有效PHP頁面"

2.form中的target="iframe的name屬性值"

3.JS中必須要有可以等待iframe加載完后處理iframe返回過來的圖片地址。

處理圖片的PHP程序頁面:

<?php

$tmp_name = $_FILES[ 'img'][ 'tmp_name'];

$name = $_FILES[ 'img'][ 'name'];

move_uploaded_file($tmp_name, './upload/'.$name);

$img = './upload/'.$name;

?>

<! DOCTYPE html>

< html>

< head>

< meta name ="viewport" content= "initial-scale=1.0, user-scalable=no" >

< meta http-equiv ="Content-type" content= "text/html;charset:utf-8" >

< script type ="text/javascript" src= "jquery.js"></ script >

</ head>

< body>

< div id= "pic" ><?php echo $img; ?></ div >

</ body>

</ html>

重點:

1.$_FILE全局超級變量可以接收到POST過來的文件，HTML input的name就是$_FILE['name']

2.接下來可以做很多處理，如判斷是不是圖片，圖片大小....

3.move_uploaded_file($tmp,$location)函數把圖片移動到相應的路徑中去，$tmp指的是文件的臨時

地址，$location指的是文件移動收的相對路徑(包含文件名的路徑!)

4.想辦法在這個處理頁面中找一個地方安放一下處理好的圖片。< div id= "pic" ><?php echo $img; ?></ div >

就這樣，我們就可以很輕易的把一個圖片異步上傳并且立即顯示到前臺頁面中。

來自：http://my.oschina.net/zerodeng/blog/313773