注意:
· 上传文件的文件名用英文;
大文件上传
XMLHttpRequest是一个浏览器接口,通过它,可以使用JavaScript进行http(s)通信。
XMLHttpRequest有一个FormData对象,使用它可以提交表单,上传二进制文件。
常规表单提交文件
常规表单提交方式,可以上传文件,但需要逐个获取表单元素,如果表单元素较多,则比较繁琐,另外,提交表单时会导致页面刷新。
前端表单代码
后台PHP代码
效果
AJAX 方式提交表单
使用ajax方式提交表单,可以避免页面刷新,但只能传递一般的参数,上传文件的文件流是无法传递的。
1. 前端代码
后台PHP代码
在未注释上图第8行代码时运行upload1. html文件 ,在浏览器中会看到如下错误信息,提示在upload1.php文件的第7行引用了未定义的file参数,从而说明前端ajax未能将文件数据传递到后台。
注释upload1.php文件中第8行代码后的运行效果
AJAX+FormData
使用AJAX+ FormData对象提交表单数据,可以不用逐个获取表单元素,同时也可以传递上传的文件数据至后台。
1. 前端代码
后台代码
效果
大文件上传
使用XMLHttpRequest FormData上传文件。
上传大文件首先需要修改php. ini 配置文件中的post_max_size参数,见下图:
使用 面向过程 方式代码实现
1. 前端代码
后台代码
效果
原文件大小是10M
上传
上传成功后生成的原文件及切片文件
使用面向对象代码方式实现
1. 前端代码
前端代码与上面的”使用面向过程方式代码实现”代码相同。
后台代码
效果
海报
0 条评论
174
相关文章
本站已关闭游客评论,请登录或者注册后再评论吧~