个人中心
gpt4 book ai didi

PHP Ajax实现无刷新附件上传

转载 作者：qq735679552 更新时间：2022-09-27 22:32:09 25 4
gpt4 key购买 nike

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章PHP Ajax实现无刷新附件上传由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

对一个网站而言，有一个基本的不可缺少的功能，那就是文件上传。使用PHP预压来实现文件上传可谓是有得天独厚的优势的，那么今天，就一起来做一个关于无刷新实现的文件上传吧.

-------------------------------------------------------------------------------- 。

普通表单 。

前端页面 。

?
1
2
3
4
5
6
7
< form action = "./fileupload.php" method = "POST" >
< p >Username< input type = "text" name = "username" /></ p >
< p >Password< input type = "password" name = "password" /></ p >
< p >E-mail< input type = "text" name = "email" /></ p >
< input type = "submit" value = "Register" />
 
</ form >

后台处理 。

?
1
2
3
4
5
6
print_r( $_POST );
$username = $_POSY [ 'username' ];
$password = $_POST [ 'password' ];
$email = $_POST [ 'email' ];
 
// 在服务器上和数据库内容信息对比即可，实现相关的业务逻辑。

··· 。

 带有文件的表单 。

带有文件的表单和普通表单是有很大的区别的，首先我们要在表单上声明一个属性，如下:

<form enctype='multipart/form-data'> 。

来告诉服务器，我们上传的表单包含有文件信息.

刷新方式 。

谈到刷新模式，也就是点击完submit之后，页面跳转到业务处理界面。这也是我们普通方式实现的表单的数据提交.

前端界面 。

?
1
2
3
4
5
6
7
< form action = "./fileupload.php" enctype = "multipart/form-data" method = "post" >
< p >Username< input type = "text" name = "username" /></ p >
< p >Password< input type = "password" name = "password" /></ p >
< p >E-mail< input type = "text" name = "email" /></ p >
< p >Photo< input type = "file" name = "photo" /></ p >
 
< input type = "submit" value = "Register" />

后台页面 。

后台处理除了普通的表单数据之外，最重要的是处理文件信息。PHP内置了一个函数，可以方便的把上传过来的文件从临时的数据区转移到我们的目标文件夹，实现上传的业务逻辑.

move_uploaded_file('临时文件路径','目标文件路径'),

无刷新方式 。

使用无刷新方式，与使用刷新方式的唯一的区别就是阻止了页面的跳转，我们通常会有两种方式来实现。  •在表单提交事件的末尾加上return false。  。

?
1
2
3
4
5
6
7
8
9
10
<script>
var form = document.getElementsByTagName( 'form' )[0];
form.onsubmit = function (){
   // to do something
   ···
   // 阻止页面跳转
   return false ;
}
 
</script>

 •使用h5相关方式.

?
1
2
3
4
5
6
7
8
9
10
<script>
var form = document.getElementsByTagName( 'form' )[0];
form.onsubmit = function (event){
   // to do something
   ···
   // 阻止页面跳转
   event.preventDefault();
}
 
</script>

其他的操作处理与带跳转的保持一致即可.

大文件上传 。

虽然PHP实现其文件上传很方便，也很快速。但是上传文件的大小并不是无限制的。默认来说，有两个因素会限制我们上传文件的大小。  •post的极值  •upload的极值 我们可以通过手动的更改php.ini配置信息来实现上传文件大小的控制。  。

POST极值 。

post_max_size = 200M 。

upload极值 。

upload_max_filesize=200M 。

上传细节 。

ajax对象有一个叫upload的属性，而且upload也作为一个对象而存在。其拥有一个叫onprogress的方法，我们可以通过监测这个方法，来查看文件上传过程中的百分比.

前端页面 。

?
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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
< html xmlns = "http://www.w3.org/1999/xhtml" >
< head >
< meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" />
< title >文件上传示例</ title >
< script >
   window.onload = function(){
     var form = document.getElementsByTagName("form")[0];
 
     form.onsubmit = function(evt){
       // 收集表单信息
       var fd = new FormData(form);
       var ajax = new XMLHttpRequest();
 
       // 给Ajax设置文件上传的感知事件
       ajax.upload.onprogress = function(evt){
         var loaded = evt.loaded;
         var total = evt.total;
         document.getElementById("progress").value =(loaded/total)*100;
       }
 
 
 
       ajax.onreadystatechange = function() {
         if(ajax.readyState==4){
           alert(ajax.responseText);
         }
       }
       ajax.open('post','./fileupload.php');
       ajax.send(fd);
       // 阻止浏览器的跳转
       evt.preventDefault();
       //return false;
     }   
   }
</ script >
</ head >
 
< body >
< h2 >无刷新方式上传附件</ h2 >
< form action = "./fileupload.php" >
< p >Username< input type = "text" name = "username" /></ p >
< p >Password< input type = "password" name = "password" /></ p >
< p >E-mail< input type = "text" name = "email" /></ p >
< p >Photo< input type = "file" name = "photo" /></ p >
<!--设置进度条-->
< style >
   #parent {width:300px;height:34px;border:1px solid #033;}
   #son {width:100%;height:10%;background-color:green}
   progress {width:100%;height:34px;}
</ style >
< div id = "parent" >
   < div id = "son" >
     < progress id = "progress" >
   </ div >
 
</ div >
 
 
< input type = "submit" value = "Register" />
 
</ form >
 
</ body >
</ html >

后台处理 。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<?php
//print_r($_POST);
//echo "---------------------"."<BR>";
//print_r($_FILES);
 
 
// 附件的存储位置、附件的名字，记得一定要存在upload文件夹
$path = "../upload/" ;
 
// 获取文件的原始名称
$origin_name = $_FILES [ 'photo' ][ 'name' ];
// 拼接成该文件在服务器上的名称
$server_name = $path . $origin_name ;
 
if ( $_FILES [ 'photo' ][ 'error' ]>0) {
   die ( "出错了！" . $_FILES [ 'photo' ][ 'error' ]);
}
if (move_uploaded_file( $_FILES [ 'photo' ][ 'tmp_name' ], $server_name )){
   echo "<BR>" . "Upload Success!" ;
} else {
   echo "<BR>" . "Upload Failed!" . $_FILES [ 'photo' ][ 'error' ]; 
}
?>

记得保证upload文件夹的存在性以及路径问题。  。

总结 。

文件上传是一个很基础的功能，实现起来也不是很复杂。但是这个功能却又是那么的重要，我们可以方便的通过文件上传来配合修改用户的诸如头像，以及其他文件信息.

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我.

原文链接：http://blog.csdn.net/marksinoberg/article/details/52216643 。

最后此篇关于PHP Ajax实现无刷新附件上传的文章就讲到这里了,如果你想了解更多关于PHP Ajax实现无刷新附件上传的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。

25 4 0
文章推荐： Eclipse 出现Failed to load JavaHL Library解决方法
文章推荐： PHP的PDO常用类库实例分析
文章推荐： Mybatis源码分析之存储过程调用和运行流程
文章推荐： java 中函数的参数传递详细介绍
qq735679552
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com