文件上传之前端和后端

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

文件上传是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中是最简单的。同级文件夹下,将会有另外的文件夹,写更复杂的文件上传。欢迎关注。

时间: 2024-10-10 16:52:40

文件上传之前端和后端的相关文章

我爱Java系列---【SpringMVC传统方式的文件上传和前端获取数据库图片在页面显示】

一.文件上传 说明:传统方式的文件上传,指的是我们上传的文件和访问的应用存在于同一台服务器上.并且上传完成之后,浏览器可能跳转. 1. 第一步:创建 maven 工程并导入 commons-fileupload 坐标 1 <dependency> 2 <groupId>commons-fileupload</groupId> 3 <artifactId>commons-fileupload</artifactId> 4 <version&g

十、Django的文件上传

一.上传文件相关 请求头ContentType ContentType指的是请求体的编码类型,常见的类型共有3种: application/x-www-form-urlencoded 最常见的 POST 提交数据的方式了 浏览器的原生 form 表单,如果不设置?enctype?属性,那么最终就会以 默认格式application/x-www-form-urlencoded 方式提交数据,ajax默认也是这个 urlencoded是一种数据格式, 比如: username=yang&passwo

ASP.NET MVC 文件上传和路径处理

ASP.NET MVC 文件上传和路径处理总结 目录 文件的上传和路径处理必须解决下面列出的实际问题: 1.重复文件处理 2.单独文件上传 3.编辑器中文件上传 4.处理文章中的图片路径 5.处理上传地址的变化 一.上传文件和重复文件处理 文件处理的原则是:不在数据库中保存文件,只在数据库中保存文件信息(Hash值等).采取文件的MD5重命名文件在一般情况足够处理文件的重复问题,强迫症倾向则可以考虑将MD5和其他摘要算法结合. public static string Save(HttpPost

Struts2完成文件上传

文件上传是WEB应用经常需要面对的问题.在大部分时候,用户的请求参数是在表单域输入的字符串,但如果为表单元素设置enctype="multipart/form-data"属性,则提交表单时候不再是以字符串方式提交请求参数,而是以二进制编码的方式提交请求,此时直接通过HttpServletRequest的getParameter方法就无法正常获取请求参数的值,而通过二进制流来获取请求内容,就可以获取到上传文件的内容,从而实现文件上传的功能. Struts2的文件上传支持在原有的文件上传项

ASP.NET MVC 文件上传和路径处理总结和Demo下载

目录 文件的上传和路径处理必须解决下面列出的实际问题: 1.重复文件处理 2.单独文件上传 3.编辑器中文件上传 4.处理文章中的图片路径 5.处理上传地址的变化 一.上传文件和重复文件处理 文件处理的原则是:不在数据库中保存文件,只在数据库中保存文件信息(Hash值等).采取文件的MD5重命名文件在一般情况足够处理文件的重复问题,强迫症倾向则可以考虑将MD5和其他摘要算法结合. public static string Save(HttpPostedFileBase file, string

Spring Boot 文件上传简易教程

上传文件是我们日常使用最为广泛的功能之一,比如App端上传头像.本章演示如何从客户端上传到 Spring Boot 开发的 Api中. 本项目源码 github 下载 1 新建 Spring Boot Maven 示例工程项目 注意:本示例是用 IDEA 开发工具 File > New > Project,如下图选择 Spring Initializr 然后点击 [Next]下一步 填写 GroupId(包名).Artifact(项目名) 即可.点击 下一步 groupId=com.fishp

前后端分离跨服务器文件上传-Java SpringMVC版

近来工作上不上特别忙,加上对后台java了解一点,所以就抽时间,写了一个java版本的前后端分离的跨服务器文件上传功能,包括前后端代码. 一.Tomcat服务器部分 1.Tomcat服务器 单独复制一份Tomcat,用来作为文件服务器 1.1 xml文件: 需要在该Tomcat的conf目录下的web.xml文件的大概100行添加如下部分: 1.2 server.xml文件: 需要在该Tomcat的conf目录下的server.xml文件做一些端口的修改 1.3 Tomcat下建立文件夹 在该T

Spring Boot + Vue 前后端分离,两种文件上传方式总结

在Vue.js 中,如果网络请求使用 axios ,并且使用了 ElementUI 库,那么一般来说,文件上传有两种不同的实现方案: 通过 Ajax 实现文件上传 通过 ElementUI 里边的 Upload 组件实现文件上传 两种方案,各有优缺点,我们分别来看. 准备工作 首先我们需要一点点准备工作,就是在后端提供一个文件上传接口,这是一个普通的 Spring Boot 项目,如下: SimpleDateFormat sdf = new SimpleDateFormat("/yyyy/MM/

前端大文件上传解决方案支持分片断点上传

最近遇见一个需要上传百兆大文件的需求,调研了七牛和腾讯云的切片分段上传功能,因此在此整理前端大文件上传相关功能的实现. 在某些业务中,大文件上传是一个比较重要的交互场景,如上传入库比较大的Excel表格数据.上传影音文件等.如果文件体积比较大,或者网络条件不好时,上传的时间会比较长(要传输更多的报文,丢包重传的概率也更大),用户不能刷新页面,只能耐心等待请求完成. 下面从文件上传方式入手,整理大文件上传的思路,并给出了相关实例代码,由于PHP内置了比较方便的文件拆分和拼接方法,因此服务端代码使用