無刷新假象實現簡易文件上傳

時間 2020-02-17

標籤刷新假象實現簡易文件上傳简体版

原文原文鏈接

傳統的上傳文件功能，點擊「上傳」後頁面會短暫地空白，等待服務器的響應；爲了提升網站的處理效率，採用模擬Ajax的無刷新假象技術，咱們能夠讓頁面在局部刷新的狀況下，實現文件上傳。
javascript

demo.html
php

 <script type="text/javascript">
     function callback(filename){
         //"$()"是封裝在單獨js文件中的函數:document.getElementById(id)
         $('photo').style.display = "none";
         $('submit').style.display = "none";
         $('msg').innerHTML = filename;
}
 </script>

 <body>
    <!--target="frm" 此時請求後臺處理的不是body框架，而是iframe框架；後臺輸出的內容也都輸出到frm-->
    <form method="post" enctype="multipart/form-data" target="frm" action="upload.php">
        照片：<input type="file" name="photo" id="photo"/>
              <input type="submit" id="submit" name="submit" value="上傳文件"/><br/>
    </form>
    <iframe name="frm" style="display:none"></iframe><br/><!--進行模擬刷新的二級框架-->
    <span id="msg"></span>
 </body>

upload.phphtml

 //文件上傳
 if (!empty($_POST['submit'])){
    $extname = strrchr($_FILES['photo']['name'],'.');
    $filename = time().$extname;
    $file = $_FILES['photo']['tmp_name'];
    copy($file,'upload/'.$filename);
    echo "<script>parent.callback('$filename');</script>";

流程解釋
java

Browser選擇完要上傳的文件後，點擊上傳文件按鈕，此時body（一級框架）沒有如願將此文件提交到action="upload.php",而是target="frm"對應的iframe框架來提交;iframe是次於body框架的二級框架，由二級框架iframe發出上傳請求，將文件上傳給action="upload.php"；在上面的html代碼當中，iframe框架style="display:none",爲了頁面美觀，咱們是看不見的，若是你想看到，就設爲「block」。此時頁面其實有刷新，但不是整個body刷新，而是二級框架iframe刷新，因爲iframe是隱藏的，並且真正的iframe默認的頁面面積是很小的，致使咱們認爲頁面是無刷新的，假象就此出現了。服務器

   echo "<script>parent.callback();</script>";

前臺等待後臺的響應，後臺返還js腳本調用前臺一級框架的callback()函數。注意，若是沒有"parent"對象，返還的js腳本就要在iframe裏面執行，而咱們想要js腳本在body裏面執行，那麼想法就成立了;還有一點，有沒有發現，「上傳文件、返還js腳本」這兩個動做的承受者都iframe，而不是body，並且程序的執行是這樣的body<=>iframe<=>upload，iframe徹底是做爲中間受衆來體現他的價值。
框架

callback(filename)函數接收後臺傳遞過來的圖片文件名後，主要作了兩件事，隱藏上傳文件的路徑框、顯示上傳成功的圖片名稱。
ide