使用iframe模擬無刷新上傳文件。

最近一直在研究使用AJAX技術上傳文件，也找了網上的一些源碼，發現基本上都是使用iframe模擬實現的。

其實AJAX是沒法實現上傳文件的，那麼咱們該怎麼實現既能不刷新當前頁面，又能在用戶上傳文檔完畢以後通知用戶文件已經上傳成功呢？

咱們知道，在一個表單中，有一個target屬性，咱們只要將表單的target屬性設置爲頁面中的一個隱藏的iframe便可，在後臺文件處理頁面中咱們能夠判斷當文件上傳成功之後執行主頁面的一個函數來達到通知用戶文件已上傳的功能。

下面我簡單的寫一下示例代碼，本示採用PHP來完成，固然，你也能夠替換成你本身熟悉的一種編程語言。

首先是主頁面。index.html

< html >
< head >
< script language ="javascript" type ="text/javascript" >
        function notice() {//通知用戶文件上傳成功
                alert("文件上傳成功！");
        }
</script>
</head>
< body >
< form target ="fileUp" method ="POST" action ="file.php" >
選擇上傳的文件 < input type ="file" name ="fileUpLoad" />
< input type ="submit" value ="上傳" />
</form>
< iframe width ="0px" height ="0px" name ="fileUp" > </iframe>
</body>
</html>

接下來是後臺文件處理頁面file.php

<?php
        $path = "C:\temp\";//設置上傳路徑爲C:\temp
        if(iswritable($path)) {//目錄可寫
                if($_FILES["fileUp"]["tmp_name"] != "none") {
    copy($_FILES["fileUp"]["tmp_name"],$path."aaa.dat");
    unlink($_FILES["fileUp"]["tmp_name"]);
                        echo " < script >parent.notice(); </script>";                 }         } ?>

當文件上傳成功，會執行主頁面中的notice函數，固然，咱們能夠給notice函數設置參數，經過file.php文件傳遞過來的參數顯示不一樣的提示來進一步加強函數的功能。