PHP Ajax JavaScript 实现 无刷新附件上传-阿里云开发者社区

开发者社区> 郭璞> 正文

PHP Ajax JavaScript 实现 无刷新附件上传

简介: 普通表单 前端页面 后台处理 带有文件的表单 刷新方式 前端界面 后台页面 无刷新方式 大文件上传 POST极值 upload极值 上传细节 前端页面 后台处理 总结 对一个网站而言,有一个基本的不可缺少的功能,那就是文件上传。
+关注继续查看

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


普通表单

前端页面

<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>

后台处理

print_r($_POST);
$username = $_POSY['username'];
$password = $_POST['password'];
$email = $_POST['email'];

// 在服务器上和数据库内容信息对比即可,实现相关的业务逻辑。
···


带有文件的表单

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

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

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

刷新方式

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

前端界面

<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。
<script>
var form = document.getElementsByTagName('form')[0];
form.onsubmit = function(){
    // to do something
    ···
    // 阻止页面跳转
    return false;
}

</script>
  • 使用h5相关方式。
<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的方法,我们可以通过监测这个方法,来查看文件上传过程中的百分比。

前端页面

<!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>

后台处理

<?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文件夹的存在性以及路径问题。

总结

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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
SSH 网站制作之AJAX无刷新动态更新页面
  在做网页时,经常需要根据用户输入信息,进行“局部页面的刷新”也就是要使用所谓的AJAX技术。最近正好也在用,就总结一下。   1.AJAX介绍       AJAX不是一种新的编程语言,而是一种用于创建更好更快以及交互性更强的 Web 应用程序的技术。
916 0
怎么设置阿里云服务器安全组?阿里云安全组规则详细解说
阿里云服务器安全组设置规则分享,阿里云服务器安全组如何放行端口设置教程
6907 0
使用OpenApi弹性释放和设置云服务器ECS释放
云服务器ECS的一个重要特性就是按需创建资源。您可以在业务高峰期按需弹性的自定义规则进行资源创建,在完成业务计算的时候释放资源。本篇将提供几个Tips帮助您更加容易和自动化的完成云服务器的释放和弹性设置。
7751 0
+关注
郭璞
一切就交给时间,它会给我答案。
368
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载