使用iframe模拟无刷新上传文件。
生活随笔
收集整理的這篇文章主要介紹了
使用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文件傳遞過來的參數顯示不同的提示來進一步增強函數的功能。
<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文件傳遞過來的參數顯示不同的提示來進一步增強函數的功能。
轉載于:https://blog.51cto.com/seanli888/179000
總結
以上是生活随笔為你收集整理的使用iframe模拟无刷新上传文件。的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： request Form request
- 下一篇： DataList之数据操作