標籤：檔案 jin script doc var sleep 分享 targe html
如果直接給使用者提示上傳成功，那麼如果使用者上傳的檔案比較大點，那麼等上半天都沒反映，那麼使用者很有可能會重新整理或者關了從來等。。。
那麼會給我們伺服器帶來一定的影響，所以我們可以對這方面的使用者體驗度進行提升，比如做類似我們經常可以見到的進度條
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script src="jq183.js"></script> <script> function ajaxup(){ var ifname = ‘up‘+Math.random(); $("<iframe name=‘"+ ifname +"‘ height=‘0‘ width=‘0‘ frameborder=‘0‘ ></iframe>").appendTo($(‘body‘)); $(‘form:first‘).attr(‘target‘,ifname); /*添加一個上傳中的標識*/ $(‘#jindu‘).html(‘<img width="20" height="20" src="./up.gif">‘); //return false; } </script></head><body> <p id="mess"></p> <p id="jindu"></p> <form action="9.php" method="post" enctype="multipart/form-data" onsubmit="return ajaxup();"> <input type="file" name="pic"> <br> <br> <input type="submit" value="GO"> </form> <iframe src="" frameborder="0"></iframe></body></html>
<?php //類比一個比較大的檔案正在上傳中 sleep(3); if(empty($_FILES)){ exit(‘No file‘); } $errs = $_FILES[‘pic‘][‘error‘] == 0 ? ‘success‘:‘error‘; echo "<script> parent.document.getElementById(‘mess‘).innerHTML = ‘$errs‘ </script>"; //上傳成功後關閉掉他 echo "<script> parent.document.getElementById(‘jindu‘).style.display = ‘none‘ </script>";
效果如下所示：
AJAX-----11iframe類比ajax檔案上傳效果原理3
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
