文件上传之前端和后端

明天又是星期一。发现周末的时间过得真快啊。光阴似子弹,嗖的一下,两天就没了。

文件上传是web开发中很常见的场景,比如填写个人信息的时候传一两张自己美美哒照片,比如上传一张个性的头像。有时候需要上传一个压缩包,文档啥的。作为程序员嘛,自然免不了要想办法让这些美照啊,文件啊顺利的到达服务器。

今天我来写一段最简单的文件上传。至于简单到什么程度,那我先介绍一下稍微复杂的文件上传吧。

1.web2.0时代,用户体验是web开发必须考虑的问题,文件上传自然不能跳转,所以,类Ajax的方式上传文件是现代网站的标配,也就是无刷新上传文件。

2.每个网站都必须考虑安全。所以,需要验证上传文件的人的身份,需要验证所上传文件的大小,类型,次数,错误处理,这些都是必不可少的。

3.文件到达服务器后,需要将文件做处理,要么通过文件系统保存在服务器磁盘中,要么将文件内容保存在数据库中。

上面所列举的一二三,每一项都可以做到很复杂。今天我写的,上面列举的内容都没有,简单到,没有安全验证,没有类Ajax,没有做文件处理。也就是文件从前端到后端。


文件上传需要前后端配合。先看代码:

前端主要代码(file.html):

1 <form action="file.php" method="post" enctype="multipart/form-data" target="file_upload">
2     选择文件:
3     <input type="file" name="a_file"><br />
4     <input type="submit" value="提交" name="send_file">
5 </form>

后端主要代码(file.php):

1 <?php
2     header("Content-type:text/html;charset=utf-8");
3     $file = $_FILES["a_file"];
4     echo $file["name"]."<br />";//文件的名称
5     echo $file["type"]."<br />";//文件的类型
6     echo $file["error"]."<br />";//文件的错误代码
7     echo $file["size"]."<br />";//文件的大小
8     echo $file["tmp_name"]."<br />";//存储的服务器的文件的临时副本的名称
9 ?>

上面两个文件就算是最简单的文件上传了。

在HTML文件中需要注意以下几点:

  • form元素的method属性值,必须是post
  • form元素的enctype属性值,必须是multipart/form-data(如果在HTML中不设置的话,其值就是默认值,默认值为:application/x-www-form-urlencoded)
  • input元素的type属性值,必须是file,并且必须设置name值,后端程序就是根据该name值获取到文件信息的。

后端file.php文件用来接收所上传的文件的信息。

php是通过一个超全局变量来访问前端上传的文件信息的,该超全局变量是:$_FILES,这是一个数组,此数组的键值,就是HTML中input元素的name值。

即:$file = $_FILES["a_file"];

通过该超全局变量获取到的信息也是一个数组,此数组有五个元素,其键值分别是:name,type,error,size,tmp_name,对于上传文件的后续处理,就是通过该数组的这五个元素值进行处理的。

先点击选择文件后面的按钮选择一个文件,再点击提交按钮,在点击提交按钮之后,就跳转到了file.php页面,即form的action属性所对应的表单处理程序。

该程序是最简单的文件上传,在实际开发过程中,不可能这么简单。就像上面说的,安全验证,文件存储等,都是必须要做的。

这是最简单的文件上传程序。后面会做更加复杂的文件上传。

https://github.com/pelligit/FileUpload

github上,php/simplest中是最简单的。同级文件夹下,将会有另外的文件夹,写更复杂的文件上传。欢迎关注。

原文地址:https://www.cnblogs.com/pelli/p/6108028.html