PHP+Ajax實現文件上傳功能

時間 2019-11-09

標籤 php+ajax php ajax 實現文件上傳功能欄目 PHP 简体版

原文原文鏈接

 前端顯示界面：
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <title>上傳文件</title>
 6   <script type="text/javascript">
 7     function sub() {
 8       var obj = new XMLHttpRequest();
 9       obj.onreadystatechange = function() {
10         if (obj.status == 200 && obj.readyState == 4) {
11           document.getElementById('con').innerHTML = obj.responseText;
12         }
13       }
14 
15       // 經過Ajax對象的upload屬性的onprogress事件感知當前文件上傳狀態
16       obj.upload.onprogress = function(evt) {
17         // 上傳附件大小的百分比
18         var per = Math.floor((evt.loaded / evt.total) * 100) + "%";
19         // 當上傳文件時顯示進度條
20         document.getElementById('parent').style.display = 'block';
21         // 經過上傳百分比設置進度條樣式的寬度
22         document.getElementById('son').style.width = per;
23         // 在進度條上顯示上傳的進度值
24         document.getElementById('son').innerHTML = per;
25       }
26 
27       // 經過FormData收集零散的文件上傳信息
28       var fm = document.getElementById('userfile3').files[0];
29       var fd = new FormData();
30       fd.append('userfile', fm);
31 
32       obj.open("post", "upload.php");
33       obj.send(fd);
34     }
35   </script>
36   <style type="text/css">
37     #parent {
38       width: 200px;
39       height: 20px;
40       border: 2px solid gray;
41       background: lightgray;
42       display: none;
43     }
44     #son {
45       width: 0;
46       height: 100%;
47       background: lightgreen;
48       text-align: center;
49     }
50   </style>
51 </head>
52 <body>
53   <h2>Ajax實現進度條文件上傳</h2>
54   <div id="parent">
55     <div id="son"></div>
56   </div>
57   <p id="con"></p>
58   <input type="file" name="userfile" id="userfile3"><br><br>
59   <input type="button" name="btn" value="文件上傳" onclick="sub()">
60 </body>
61 </html>

後臺處理頁面：

f ($_FILES['userfile']['error'] > 0) {
                exit("上傳文件有錯".$_FILES['userfile']['error']);
                echo errors;
        }

        // 定義存放上傳文件的真實路徑
        $path = './upload/';
        // 定義存放上傳文件的真實路徑名字
        $name = $_FILES['userfile']['name'];

        // 將文件的名字的字符編碼從UTF-8轉成GB2312
        $name = iconv("UTF-8", "GB2312", $name);

        // 將上傳文件移動到指定目錄文件中
        if (move_uploaded_file($_FILES['userfile']['tmp_name'], $path.$name)) {
                echo "文件上傳成功";
        } else {
                echo "文件上傳失敗";
        }
 ?>





性能優化處理-》上傳大小限制-》修改中間件Apache下的php.ini文件

max_execution_time = 1200，Maximum execution time of each script, in seconds 腳本最大執行時間，單位是秒javascript

max_input_time = 1000 接收傳輸數據的最長時間，單位也是秒php

memory_limit = 128M 一個腳本佔用內存的上限css

post_max_size = 128M post方式傳輸的數據最大的上限html

file_uploads = On 容許文件上傳前端

upload_max_filesize = 100M 上傳的文件上限java

max_file_uploads = 20 一次容許上傳20個文件

性能優化

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。