PHP文件上传upload

传统的form表单提交文件上传

HTML页面代码

1
2
3
4
<form method = "post" action="index.php/User/upload" enctype='multipart/form-data'>
<input type="file" name="uploadfile"/ >
<input type="submit" />
</form>

表单中enctype="multipart/form-data"的意思,是设置表单的MIME编码。默认情况,这个编码格式是application/x-www-form-urlencoded,不能用于文件上传;只有使用了multipart/form-data,才能完整的传递文件数据,进行下面的操作。

PHP页面代码

这里我做了路径路由,这是后端index.php文件的代码:

1
2
3
4
5
6
$arr = explode("/",ltrim($_SERVER['PATH_INFO'],"/"));
$head = $arr[0]."Controller";
$con = $arr[1];
require "$head.class.php";
$m = new $head();
$m->$con();

然后到UserController.class.php里面的文件处理代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
class UserController{
function upload(){
$upload_dir ="./upload/"; //设置文件上传目录地址
$format = array("image/jpeg","image/png","image/gif"); //设置上传文件的格式类型
$key = array_keys($_FILES)[0]; //这里单文件上传,获取上传文件的名称
if($_FILES[$key]['size'] > 1024 * 1024 * 1024){ //设置文件大小
die("文件超出大小限制");
}
if(!in_array($_FILES[$key]['type'],$format )){//设置文件类型
die("文件类型不符");
}
if(file_exists($upload_dir)){
if($_FILES[$key]['error'] ==0){
$tmpName = $_FILES[$key]['tmp_name']; //获取临时文件
$name = $_FILES[$key]['name']; //获取文件真实名字
move_uploaded_file($tmpName, $upload_dir.$name);
}
}
}
}

注意,上面如果当前路径下没有upload文件夹的话,会报错。

通过FormData对象,然后利用XMLHttpRequest对象提交

html代码

1
2
3
4
5
6
7
8
9
10
<form action="" name="form" method="post" enctype="multipart/form-data">
<input type="file" name="file" />
<input type="button" name="sub" value="提交" />
</form>
<div>
文件大小 (单位:M):
<span id="bytesRead"></span>
/
<span id="bytesTotal"></span>
</div>

js代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
var form = document.forms['form'];
var btn = form['sub'];
btn.onclick = function(){
if(form['file'].files.length==0){
alert("请选择文件");
return;
}
var file = form['file'].files[0];
var reader = new FileReader();
reader.onloadstart = function(){ //onloadstart 在读取开始时触发
document.getElementById("bytesTotal").textContent = parseInt(file.size/1024/1024*100)/100 + "M";
}
reader.onprogress = function(p){ //onprogress 在读取进行中时触发
document.getElementById("bytesRead").textContent = parseInt(p.loaded/1024/1024*100)/100 + "M";
}
reader.onload = function() { // 这个事件在读取成功结束后触发
}
reader.onloadend = function(){ //文件读取完成 无论失败或成功都会触发
if(reader.error){
console.log(reader.error);
return;
}
var dData = new FormData(form); //FormData对象
var xhr = new XMLHttpRequest();
xhr.open("POST", "upload.php"); //发送方式 发送地址
xhr.send(dData);
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
//console.log("response: " + xhr.responseText);
var rsData = JSON.parse(xhr.responseText);
if(rsData.status){
alert("上传成功");
}else{
alert("上传失败");
}
}
}
}
reader.readAsDataURL(file);
}

当然,如果改成用$.ajax提交就更简单了,只不过需要修改点东西。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$.ajax({
url:'./upload.php',
type:'post',
cache:false,//FormData对象不需要缓存
data:dData,
processData:false, //FormData对象 不需要做数据处理
contentType:false, //已经声明了enctype="multipart/form-data"内容编码类型,所以这里设置为false
success:function(msg){
var rsData = JSON.parse(msg);
if(rsData.status){
alert("上传成功");
}else{
alert("上传失败");
}
}
})

如果想要上传多个文件,只需要在<input type="file">里添加multiple或multiple="multiple"属性就行了,后台的PHP文件再做下数据接收的处理。