首先是同步上传，最为基础的上传的方式，点击表单提交之后跳转那种。如下前端代码

 <!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图片、音频和视频文件上传的更多相关文章

  1. PHP实现视频文件上传完整实例

    这篇文章主要介绍了PHP实现视频文件上传的技巧,包含了PHP配置信息的设计及大文件的处理,需要的朋友可以参考下    本文以一个完整实例的形式实现了视频文件上传的功能.虽然是比较基础的应用,仍有一定的 ...

  2. EasyDSS高性能RTMP、HLS(m3u8)、HTTP-FLV、RTSP流媒体服务器功能简介---实时数据统计报表、视频文件上传、点播、分享、集成

    熟悉EasyDSS流媒体服务器的小伙伴应该都知道,EasyDSS通过将EasyRTMP推流的直播流进行直播转码.智能处理.视频分发,再通过 CDN 分发节点分发到终端播放 SDK为观众播放高清低延时的 ...

  3. layui时间，table,大图查看，弹出框，获取音频长度，文件上传

    1.引入: <link href="../../Scripts/layui-v2.3.0/css/layui.css" rel="stylesheet" ...

  4. DEDECMS：解决BMP、jpeg图片或MP4视频无法上传和在后台无法显示

    一.BMP图片无法上传解决方法: 1.修改配置文件: 在include-->dialog的文件夹下, select_images_post.php--> 把 $sparr = Array( ...

  5. EasyDSS流媒体解决方案实现的实时数据统计报表、视频文件上传、点播、分享、集成代码等功能

    之前的EasyDSS作为rtmp流媒体服务器自从推出就备受用户好评,随着用户的需求的变更产品自身的发展是必须的: 为了更好的用户体验和和功能的完善,我们在EasyDSS的基础上增添了服务器硬件数据报表 ...

  6. 使用element UI el-upload组件实现视频文件上传及上传进度显示方法总结

    实现效果: 上传中: 上传完成: 代码: <el-form-item label="视频上传" prop="Video"> <!-- acti ...

  7. php+大视频文件上传+进度条

    该项目核心就是文件分块上传.前后端要高度配合,需要双方约定好一些数据,才能完成大文件分块,我们在项目中要重点解决的以下问题. * 如何分片: * 如何合成一个文件: * 中断了从哪个分片开始. 如何分 ...

  8. 在ASP.NET中实现图片、视频文件上传方式

    一.图片 1.在前端用<asp:FileUpload ID="UpImgName" runat="server"/>控件 2.在后台.cs中写上 p ...

  9. .Net语言 APP开发平台——Smobiler学习日志：快速实现应用中的图片、声音等文件上传功能

    最前面的话:Smobiler是一个在VS环境中使用.Net语言来开发APP的开发平台,也许比Xamarin更方便 样式一 一.目标样式 我们要实现上图中的效果,需要如下的操作: 1.从工具栏上的&qu ...

随机推荐

  1. day 20 约束 异常处理 MD5

    1.类的约束(重点): 写一个父类.  父类中的某个方法要抛出一个异常  NotImplementError # 项目经理 class Base:     # 对子类进行了约束. 必须重写该方法    ...

  2. 第三篇 : vi编辑器配置与基本操作

    目录 一.vi编辑器的配置 二.一般模式下的常用操作 一.vi编辑器的配置 配置文件位置 #配置文件virc(vi);vimrc(vim) cd /etc/vim //配置文件有在这目录的,也有可能是 ...

  3. Python学习 ：装饰器

    装饰器(函数) 装饰器作为一个函数,可以为其他函数在不修改原函数代码的前提下添加新的功能 装饰器的返回值是一个函数对象.它经常用于有切面需求的场景,比如:插入日志.性能测试.事务处理.缓存.权限校验等 ...

  4. PTA基础编程题目集7-2然后是几点

    有时候人们用四位数字表示一个时间,比如1106表示11点零6分.现在,你的程序要根据起始时间和流逝的时间计算出终止时间. 读入两个数字,第一个数字以这样的四位数字表示当前时间,第二个数字表示分钟数,计 ...

  5. 深入理解@RequestBody注解

    我写文章历来追求通俗易懂,今天来深入探讨一下@RequestBody注解.提起这个,所有做过mvc开发的同学应该都不陌生,使用上面肯定也是信手拈来. 所以我这里就简单的提一下这个注解的使用: 1.当客 ...

  6. 数据库 MySQL part4

    存储引擎 什么是存储引擎? mysql中建的库是文件夹,建的表是文件.文件有不同的类型,数据库中的表也有不同的类型,表的类型不同,会对应mysql不同的存取机制,表类型又称为存储引擎. 存储引擎说白了 ...

  7. Git使用列表(四)

    最近,由于自己的一个项目,导致自己的关于自己的要使用Git的很多的命令,突然发现自己的git的还有许多不知道的东西 不过,在这个工作的过程中,也发现自己的一些很大的缺陷,就是自己题目理解力有限,明明就 ...

  8. jxls-2.x导出excel入门——基本操作

    之前随笔使用的是1.x的比较古老的版本了,已经不再维护,接下来使用较新的2.x的版本进行导出 之前一直按照其他的博客与官网的随笔进行导出,发现一直报错,后面更换了POI的版本为3.16(因为jxls也 ...

  9. 抓猫_KEY

    抓猫 题面如下: [ 题目描述] 流浪猫布满城市的每一个角落, 非常影响市容市貌, 作为城市聘请的抓猫者, 你有一 种捕捉器, 一定可以捕捉到所有走到里面的猫, 更加幸运的是你有一个非常厉害的动物心理 ...

  10. Java - 无乱码读写文件

    Java读取数据流的时候,一定要指定数据流的编码方式,否则将使用本地环境中的默认字符集. BufferedReader reader = null; String laststr = "&q ...