Thinkphp5图片、音频和视频文件上传
首先是同步上传，最为基础的上传的方式，点击表单提交之后跳转那种。如下前端代码
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>上传文件</title>
</head> <body>
<form action="upload" enctype="multipart/form-data" method="post">
<input type="file" name="image" />
<br>
<input type="submit" value="上传" />
</form>
</body> </html>
注意这里的enctype必须enctype="multipart/form-data"，方案必须是post。后端代码直接拿tp5的官网示例代码吧：
public function upload(){
// 获取表单上传文件 例如上传了001.jpg
$file = request()->file('image');
// 移动到框架应用根目录/public/uploads/ 目录下
if($file){
$info = $file->move(ROOT_PATH . 'public' . DS . 'uploads');
if($info){
// 成功上传后 获取上传信息
// 输出 jpg
echo $info->getExtension();
// 输出 20160820/42a79759f284b767dfcb2a0197904287.jpg
echo $info->getSaveName();
// 输出 42a79759f284b767dfcb2a0197904287.jpg
echo $info->getFilename();
}else{
// 上传失败获取错误信息
echo $file->getError();
}
};
}
后面发现自己做的好简单，于是改进了前端代码，并且前端代码实现了文件类型校验，将同步改为ajax异步提交，同时改为formdata提交文件数据，后台代码没有太大变化，返回了提交文件的链接，而前端预览只能预览图片。改过之后的前端代码为
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>上传文件</title>
</head> <body>
<form action="uploads1a" id="myform">
<input type="file" name="image" id="file" />
</form>
<div id="test"></div>
<button id="btn">点击上传</button>
<div>
<img src="" id="see">
</div>
<script type="text/javascript">
var btn = document.getElementById("btn");
var file=document.getElementById("file");
var promise=["png","jpg","jpeg","gif","mp3","mp4","svg"]; file.onchange=function(){
var name=file.value;
var ext=name.substring(name.lastIndexOf(".") + ).toLowerCase();
var res=promise.indexOf(ext);
if (res<) {
alert("文件格式不正确");
document.getElementById("btn").disabled=true;
}else{
document.getElementById("btn").disabled=false;
}
}
btn.onclick = function() {
var val=document.getElementById("file").value;
if (val.length==) {
return;
}
var fromData = new FormData(document.forms[]);
fromData.append("test", "formdata"); var oAjax = new XMLHttpRequest();
oAjax.open('post', "uploadAjax", true);
oAjax.send(fromData);
oAjax.onreadystatechange = function() {
if (oAjax.readyState == ) {
if (oAjax.status >= && oAjax.status < || oAjax.status == ) {
console.log(oAjax.responseText);
var data=JSON.parse(oAjax.responseText);
document.getElementById("see").setAttribute("src","/thinkphp"+data.src);
document.getElementById("file").value="";
} else {
console.log(oAjax.status);
}
}
};
}
</script>
</body> </html>
后端代码改进了一下
public function uploadAjax(){
// 获取表单上传文件 例如上传了001.jpg
$file = request()->file('image');
$test=request()->post("test");
$src=[];//返回文件路径
// 移动到框架应用根目录/public/uploads/ 目录下
if($file){
$info = $file->move(ROOT_PATH . 'public' . DS . 'uploads');
if($info){
// 成功上传后 获取上传信息
// 输出 jpg
$info->getExtension();
// 输出 20160820/42a79759f284b767dfcb2a0197904287.jpg
$info->getSaveName();
// 输出 42a79759f284b767dfcb2a0197904287.jpg
$info->getFilename();
$src["src"]=DS.'public'.DS.'uploads'.DS.$info->getSaveName();
}else{
// 上传失败获取错误信息
$file->getError();
}
};
return json_encode($src);
}
细节方面，比如上传之后报错返回信息没有做处理。
整体实现就是这样，作为一个常用的业务场景，这个本身还有很多改进的余地，比如删除已经上传的文件或者校验文件是否已经上传，如果上传不能二次上传或者删除掉前面上传的。当然如果文件名称不做处理而是原名称上传，则上传之后会覆盖原文件。
本文结束。
Thinkphp5图片、音频和视频文件上传的更多相关文章
- PHP实现视频文件上传完整实例
这篇文章主要介绍了PHP实现视频文件上传的技巧,包含了PHP配置信息的设计及大文件的处理,需要的朋友可以参考下 本文以一个完整实例的形式实现了视频文件上传的功能.虽然是比较基础的应用,仍有一定的 ...
- EasyDSS高性能RTMP、HLS(m3u8)、HTTP-FLV、RTSP流媒体服务器功能简介---实时数据统计报表、视频文件上传、点播、分享、集成
熟悉EasyDSS流媒体服务器的小伙伴应该都知道,EasyDSS通过将EasyRTMP推流的直播流进行直播转码.智能处理.视频分发,再通过 CDN 分发节点分发到终端播放 SDK为观众播放高清低延时的 ...
- layui时间，table,大图查看，弹出框，获取音频长度，文件上传
1.引入: <link href="../../Scripts/layui-v2.3.0/css/layui.css" rel="stylesheet" ...
- DEDECMS：解决BMP、jpeg图片或MP4视频无法上传和在后台无法显示
一.BMP图片无法上传解决方法: 1.修改配置文件: 在include-->dialog的文件夹下, select_images_post.php--> 把 $sparr = Array( ...
- EasyDSS流媒体解决方案实现的实时数据统计报表、视频文件上传、点播、分享、集成代码等功能
之前的EasyDSS作为rtmp流媒体服务器自从推出就备受用户好评,随着用户的需求的变更产品自身的发展是必须的: 为了更好的用户体验和和功能的完善,我们在EasyDSS的基础上增添了服务器硬件数据报表 ...
- 使用element UI el-upload组件实现视频文件上传及上传进度显示方法总结
实现效果: 上传中: 上传完成: 代码: <el-form-item label="视频上传" prop="Video"> <!-- acti ...
- php+大视频文件上传+进度条
该项目核心就是文件分块上传.前后端要高度配合,需要双方约定好一些数据,才能完成大文件分块,我们在项目中要重点解决的以下问题. * 如何分片: * 如何合成一个文件: * 中断了从哪个分片开始. 如何分 ...
- 在ASP.NET中实现图片、视频文件上传方式
一.图片 1.在前端用<asp:FileUpload ID="UpImgName" runat="server"/>控件 2.在后台.cs中写上 p ...
- .Net语言 APP开发平台——Smobiler学习日志：快速实现应用中的图片、声音等文件上传功能
最前面的话:Smobiler是一个在VS环境中使用.Net语言来开发APP的开发平台,也许比Xamarin更方便 样式一 一.目标样式 我们要实现上图中的效果,需要如下的操作: 1.从工具栏上的&qu ...
随机推荐
- Facade(外观模式或门面模式）
常用的模式之一. 为子系统中的一组接口提供一个一致的界面,此模式定义了一个高层接口,这个接口使得这一子系统更加容易使用. 完美地体现了依赖倒转原则和迪米特法则的思想. Facade模式应用场景: 首先 ...
- Final,finally,finalize区别
final— 修饰符(关键字)如果一个类被声明为final,意味着它不能再派生出新的子类,不能作为父类被继承.因此一个类不能既被声明为 abstract的,又被声明为final的.将变量或方法声明为f ...
- 树莓派如何连接WIFI
hello,大家好,我是叶秋! 上一期呢,给大家介绍了如何给树莓派安装系统,有细心的朋友就会发现上一期安装系统的文章漏了一点点知识,不知道机智的你是否有发现呢~~(尴尬
- 20145234黄斐《Java程序设计》第七周学习总结（课本部分）
教材知识概述 存储器系统是一个具有不同容量.成本和访问时间的存储设备的层次结构. 6.1 存储技术 1.随机访问存储器(RAM)分为两类:静态的(SRAM)比动态的(DRAM)快,但也贵得多 静态RA ...
- SQL 注入、XSS 攻击、CSRF 攻击
SQL 注入.XSS 攻击.CSRF 攻击 SQL 注入 什么是 SQL 注入 SQL 注入,顾名思义就是通过注入 SQL 命令来进行攻击,更确切地说攻击者把 SQL 命令插入到 web 表单或请求参 ...
- EL/JSTL-jsp页面更简单的输出方式
1.EL(Expression Language):表达式语言,用于页面输出 格式:${表达式} EL支持四则运算,关系运算[常用eq来比较字符串或判断相等],逻辑运算 EL访问空间内对象,[类.对象 ...
- 成都Uber优步司机奖励政策（1月18日）
滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...
- 【LG1975】[国家集训队]排队
[LG1975][国家集训队]排队 题面 洛谷 题解 又是一个偏序问题 显然\(CDQ\) 交换操作不好弄怎么办? 可以看成两次删除两次插入 排序问题要注意一下 代码 #include <ios ...
- EDM站点
设计邮件模版 http://templates.mailchimp.com/
- NavRouter
使用方法只需要跟vue-router一样正常使用即可,这里我们新加了一个路由跳转方法nav: router.nav()//参数同router.replace一样. 路由跳转策略 首先说下路由跳转过程, ...