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个文件

性能优化