我们平时经常做的是上传文件,上传文件夹与上传文件类似,但也有一些不同之处,这次做了上传文件夹就记录下以备后用。

首先我们需要了解的是上传文件三要素:

1.表单提交方式:post (get方式提交有大小限制,post没有)

2.表单的enctype属性:必须设置为multipart/form-data.

3.表单必须有文件上传项:file,且文件项需要给定name值

上传文件夹需要增加一个属性webkitdirectory,像这样:

<input id="fileFolder" name="fileFolder" type="file"  webkitdirectory>

功能介绍:

树形目录导航。您可以通过树型目录导航和路径导航栏快速跳转到指定目录。在跳转后树型目录将会自动选中当前的目录。

路径导航,点击根目录按钮便可返根目录

文件和目录重命名

点击删除按钮

点击确定后,页面中的文件消失

批量上传文件

粘贴上传

复制文件夹、文件或图片

在页面中选择好相应的上传目录,点击粘贴上传按钮,数据即可快速开始上传

批量上传文件和文件夹

数据库记录

文件和目录下载

工程截图

以下是实例的部分脚本文件与文件块处理代码:

//文件上传对象function FileUploader(fileLoc, mgr){var _this = this;this.id = fileLoc.id;this.ui = { msg: null, process: null, percent: null, btn: { del: null, cancel: null,post:null,stop:null }, div: null};this.isFolder = false; //不是文件夹this.app = mgr.app;this.Manager = mgr; //上传管理器指针this.event = mgr.event;this.FileListMgr = mgr.FileListMgr;//文件列表管理器this.Config = mgr.Config;this.fields = jQuery.extend({}, mgr.Config.Fields, fileLoc.fields);//每一个对象自带一个fields幅本this.State = this.Config.state.None;this.uid = this.fields.uid;this.fileSvr = {pid: "", id: "", pidRoot: "", f_fdTask: false, f_fdChild: false, uid: 0, nameLoc: "", nameSvr: "", pathLoc: "", pathSvr: "", pathRel: "", md5: "", lenLoc: "0", sizeLoc: "", FilePos: "0", lenSvr: "0", perSvr: "0%", complete: false, deleted: false};//json obj,服务器文件信息this.fileSvr = jQuery.extend(this.fileSvr, fileLoc);//准备this.Ready = function (){this.ui.msg.text("正在上传队列中等待...");this.State = this.Config.state.Ready;};this.svr_error = function (){alert("服务器返回信息为空,请检查服务器配置");this.ui.msg.text("向服务器发送MD5信息错误");this.ui.btn.cancel.text("续传");};this.svr_create = function (sv){if (sv.value == null){this.svr_error(); return;}var str = decodeURIComponent(sv.value);//this.fileSvr = JSON.parse(str);////服务器已存在相同文件,且已上传完成if (this.fileSvr.complete){this.post_complete_quick();} //服务器文件没有上传完成else{this.ui.process.css("width", this.fileSvr.perSvr);this.ui.percent.text(this.fileSvr.perSvr);this.post_file();}};this.svr_update = function () {if (this.fileSvr.lenSvr == 0) return;var param = { uid: this.fields["uid"], offset: this.fileSvr.lenSvr, lenSvr: this.fileSvr.lenSvr, perSvr: this.fileSvr.perSvr, id: this.id, time: new Date().getTime() };$.ajax({type: "GET", dataType: 'jsonp', jsonp: "callback" //自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名, url: this.Config["UrlProcess"], data: param, success: function (msg) {}, error: function (req, txt, err) { alert("更新文件进度错误!" + req.responseText); }, complete: function (req, sta) { req = null; }});};this.post_process = function (json){this.fileSvr.lenSvr = json.lenSvr;//保存上传进度this.fileSvr.perSvr = json.percent;this.ui.percent.text("("+json.percent+")");this.ui.process.css("width", json.percent);var str = json.lenPost + " " + json.speed + " " + json.time;this.ui.msg.text(str);};this.post_complete = function (json){this.fileSvr.perSvr = "100%";this.fileSvr.complete = true;$.each(this.ui.btn, function (i, n){n.hide();});this.ui.process.css("width", "100%");this.ui.percent.text("(100%)");this.ui.msg.text("上传完成");this.Manager.arrFilesComplete.push(this);this.State = this.Config.state.Complete;//从上传列表中删除this.Manager.RemoveQueuePost(this.fileSvr.id);//从未上传列表中删除this.Manager.RemoveQueueWait(this.fileSvr.id);var param = { md5: this.fileSvr.md5, uid: this.uid, id: this.fileSvr.id, time: new Date().getTime() };$.ajax({type: "GET", dataType: 'jsonp', jsonp: "callback" //自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名, url: _this.Config["UrlComplete"], data: param, success: function (msg){_this.event.fileComplete(_this);//触发事件_this.FileListMgr.UploadComplete(_this.fileSvr);//添加到服务器文件列表_this.post_next();}, error: function (req, txt, err) { alert("文件-向服务器发送Complete信息错误!" + req.responseText); }, complete: function (req, sta) { req = null; }});};this.post_complete_quick = function (){this.fileSvr.perSvr = "100%";this.fileSvr.complete = true;this.ui.btn.stop.hide();this.ui.process.css("width", "100%");this.ui.percent.text("(100%)");this.ui.msg.text("服务器存在相同文件,快速上传成功。");this.Manager.arrFilesComplete.push(this);this.State = this.Config.state.Complete;//从上传列表中删除this.Manager.RemoveQueuePost(this.fileSvr.id);//从未上传列表中删除this.Manager.RemoveQueueWait(this.fileSvr.id);//添加到文件列表this.FileListMgr.UploadComplete(this.fileSvr);this.post_next();this.event.fileComplete(this);//触发事件};this.post_stoped = function (json){this.ui.btn.post.show();this.ui.btn.del.show();this.ui.btn.cancel.hide();this.ui.btn.stop.hide();this.ui.msg.text("传输已停止....");if (this.Config.state.Ready == this.State){this.Manager.RemoveQueue(this.fileSvr.id);this.post_next();return;}this.State = this.Config.state.Stop;//从上传列表中删除this.Manager.RemoveQueuePost(this.fileSvr.id);this.Manager.AppendQueueWait(this.fileSvr.id);//添加到未上传列表//传输下一个this.post_next();};this.post_error = function (json){this.svr_update();this.ui.msg.text(this.Config.errCode[json.value]);this.ui.btn.stop.hide();this.ui.btn.post.show();this.ui.btn.del.show();this.State = this.Config.state.Error;//从上传列表中删除this.Manager.RemoveQueuePost(this.fileSvr.id);//添加到未上传列表this.Manager.AppendQueueWait(this.fileSvr.id);this.post_next();};this.md5_process = function (json){var msg = "正在扫描本地文件,已完成:" + json.percent;this.ui.msg.text(msg);};this.md5_complete = function (json){this.fileSvr.md5 = json.md5;this.ui.msg.text("MD5计算完毕,开始连接服务器...");this.event.md5Complete(this, json.md5);//biz eventvar loc_path = encodeURIComponent(this.fileSvr.pathLoc);var loc_len = this.fileSvr.lenLoc;var loc_size = this.fileSvr.sizeLoc;var param = jQuery.extend({}, this.fields, { md5: json.md5, id: this.fileSvr.id, lenLoc: loc_len, sizeLoc: loc_size, pathLoc: loc_path, time: new Date().getTime() });$.ajax({type: "GET", dataType: 'jsonp', jsonp: "callback" //自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名, url: this.Config["UrlCreate"], data: param, success: function (sv){_this.svr_create(sv);}, error: function (req, txt, err){alert("向服务器发送MD5信息错误!" + req.responseText);_this.ui.msg.text("向服务器发送MD5信息错误");_this.ui.btn.del.text("续传");}, complete: function (req, sta) { req = null; }});};this.md5_error = function (json){this.ui.msg.text(this.Config.errCode[json.value]);//文件大小超过限制,文件大小为0if ("4" == json.value|| "5" == json.value){this.ui.btn.stop.hide();this.ui.btn.cancel.show();}else{           this.ui.btn.post.show();this.ui.btn.stop.hide();}this.State = this.Config.state.Error;//从上传列表中删除this.Manager.RemoveQueuePost(this.fileSvr.id);//添加到未上传列表this.Manager.AppendQueueWait(this.fileSvr.id);this.post_next();};this.post_next = function (){var obj = this;setTimeout(function () { obj.Manager.PostNext(); }, 500);};this.post = function (){this.Manager.AppendQueuePost(this.fileSvr.id);this.Manager.RemoveQueueWait(this.fileSvr.id);if (this.fileSvr.md5.length > 0){this.post_file();}else{this.check_file();}};this.post_file = function (){this.ui.btn.cancel.hide();this.ui.btn.stop.show();this.State = this.Config.state.Posting;//this.app.postFile({ id: this.fileSvr.id, pathLoc: this.fileSvr.pathLoc, pathSvr:this.fileSvr.pathSvr,lenSvr: this.fileSvr.lenSvr, fields: this.fields });};this.check_file = function (){//this.ui.btn.cancel.text("停止").show();this.ui.btn.stop.show();this.ui.btn.cancel.hide();this.State = this.Config.state.MD5Working;this.app.checkFile({ id: this.fileSvr.id, pathLoc: this.fileSvr.pathLoc });};this.stop = function (){this.ui.btn.del.hide();this.ui.btn.cancel.hide();this.ui.btn.stop.hide();this.ui.btn.post.hide();this.svr_update();this.app.stopFile({ id: this.fileSvr.id });       };//手动停止,一般在StopAll中调用this.stop_manual = function (){if (this.Config.state.Posting == this.State){this.svr_update();this.ui.btn.post.show();this.ui.btn.stop.hide();this.ui.btn.cancel.hide();this.ui.msg.text("传输已停止....");this.app.stopFile({ id: this.fileSvr.id ,tip:false});this.State = this.Config.state.Stop;}};//删除,一般在用户点击"删除"按钮时调用this.remove = function (){this.Manager.del_file(this.fileSvr.id);this.app.delFile(this.fileSvr);this.ui.div.remove();};}<?phpob_start();/*控件每次向此文件POST数据逻辑:1.更新数据库进度2.将文件块数据保存到服务器中。更新记录:2014-04-09 增加文件块验证功能。2017-07-11简化文件块逻辑,取消进度更新操作*/require '../vendor/autoload.php';require('biz/up6_biz_event.php');require('model/FileInf.php');require('utils/FileBlockWriter.php');require('utils/HttpHeader.php');require('utils/PathTool.php');use utils\FileBlockWriter;$head = new HttpHeader();$uid         = $head->param("uid");$fid         = $head->param("id");$md5         = $head->param("md5");$lenSvr           = $head->param("lenSvr");$lenLoc           = $head->param("lenLoc");$blockOffset = $head->param("blockOffset");$blockSize        = $head->param("blockSize");$blockIndex       = $head->param("blockIndex");$blockMd5         = $head->param("blockMd5");$complete         = (bool)$head->param("complete");$pathSvr     = $_POST["pathSvr"];$pathSvr     = PathTool::urldecode_path($pathSvr);$pathTmp     = $_FILES['file']['tmp_name'];////相关参数不能为空if (   (strlen($lenLoc)>0)&& (strlen($uid)>0)&& (strlen($fid)>0)&& (strlen($blockOffset)>0)&& !empty($pathSvr)){$verify = false;$msg = "";$md5Svr = "";if(!empty($blockMd5)){$md5Svr = md5_file($pathTmp);}//验证大小$verify = intval($blockSize) == filesize($pathTmp);if( !$verify ){$msg = "block size error sizeSvr:" . filesize($pathTmp) . " sizeLoc:" . $blockSize;}if( $verify && !empty($blockMd5) ){$verify = $md5Svr == $blockMd5;if(!$verify) $msg = "block md5 error";}if( $verify ){//保存文件块数据$fbw = new FileBlockWriter();if(0 == strcmp($blockIndex,"1")) $fbw->CreateFile($pathSvr,$lenLoc);$fbw->write($blockOffset, $lenLoc, $pathSvr, $pathTmp);up6_biz_event::file_post_block($fid, $blockIndex);$obj = Array('msg'=>'ok', 'md5'=>$md5Svr, 'offset'=>$blockOffset);$msg = json_encode($obj);}ob_clean();echo $msg;}else{echo "param is null";echo "uid:$uid<br/>";echo "fid:$fid<br/>";echo "md5:$md5<br/>";echo "lenSvr:$lenSvr<br/>";echo "lenLoc:$lenLoc<br/>";echo "f_pos:$blockOffset<br/>";echo "complete:$complete<br/>";echo "pathSvr:$pathSvr<br/>";}header('Content-Length: ' . ob_get_length());?><?phprequire('../../db/database/DbHelper.php');require('../../db/utils/PathTool.php');require('../../db/model/FileInf.php');require('../model/DnFileInf.php');require('../biz/DnFile.php');$id      = $_GET["id"];$uid         = $_GET["uid"];$fdTask = $_GET["fdTask"];$nameLoc     = $_GET["nameLoc"];$pathLoc     = $_GET["pathLoc"];$lenSvr = $_GET["lenSvr"];$sizeSvr     = $_GET["sizeSvr"];$cbk         = $_GET["callback"];$pathLoc = PathTool::urldecode_path($pathLoc);$nameLoc = PathTool::urldecode_path($nameLoc);$sizeSvr = PathTool::urldecode_path($sizeSvr);if (  strlen($uid) < 1||empty($pathLoc)||empty($lenSvr)){echo cbk . "({\"value\":null})";die();}$inf = new DnFileInf();$inf->id = $id;$inf->uid = intval($uid);$inf->nameLoc = $nameLoc;$inf->pathLoc = $pathLoc;$inf->lenSvr = intval($lenSvr);$inf->sizeSvr = $sizeSvr;$inf->fdTask = $fdTask == "1";$db = new DnFile();$db->Add($inf);$json = json_encode($inf,JSON_UNESCAPED_SLASHES| JSON_UNESCAPED_UNICODE);$json = urlencode($json);$json = "$cbk({\"value\":\"".$json."\"})";//返回jsonp格式数据。echo $json;?>

控件包下载:
cab(x86):http://t.cn/Ai9pmG8S

cab(x64):http://t.cn/Ai9pm04B

xpi:http://t.cn/Ai9pubUc

crx:http://t.cn/Ai9pmrcy

exe:http://t.cn/Ai9puobe

示例下载:

asp.net:http://t.cn/Ai9pue4A

jsp-eclipse:http://t.cn/Ai9p3LSx

jsp-myeclipse:http://t.cn/Ai9p3IdC

php: http://t.cn/Ai9p3CKQ

在线教程:
asp.net-文件管理器教程:http://j.mp/2MLoQWf

jsp-文件管理器教程:http://j.mp/2WJ2Y1m

php-文件管理器教程:http://j.mp/2MudPs3

php上传视频文件怎么实现相关推荐

  1. tp5.1 乐视云上传视频文件(https请求http乐视云上传接口)http网址下上传视频(https API接口)

    一.sdk_php_v2.0.zip 上传视频 网址:http://www.lecloud.com/zh-cn/help/api.html tp5.1 乐视云上传视频文件(https请求http乐视云 ...

  2. html5视频上传云,vue+七牛云上传视频文件

    Qiniu-JavaScript-SDK基于七牛云存储官方 API 构建,其中上传功能基于 H5 File API.开发者基于 JS-SDK 可以方便的从浏览器端上传文件至七牛云存储,并对上传成功后的 ...

  3. FileUpload 上传视频文件简单实例

    我们都知道 当Html input  标签类型为file时 同时将from 表单元素的enctype属性设置为 multipart/form-data 这样就可以上传文件 ,但是这种方式 只能上传文本 ...

  4. 【phpcms-v9】phpcms-v9上传视频文件时的解决方案

    1.不建议直接在后台上传视频文件,因为视频文件一般都比较大,直接上传影响带宽:可先通过ftp工具将视频文件上传到指定目录,然后再后台引入视频文件的地址即可 2.如果在上传视频的时候,只想显示" ...

  5. 上传视频文件到又拍云,jsp内嵌window media player在线播放

    上传视频文件到又拍云,jsp内嵌window media player在线播放 完成上述功能的后台路径 filePath.jsp(ajax)->UpYunController.java--> ...

  6. php上传视频文件代码,PHP视频文件上传完整示例代码

    这里有新鲜揭晓的PHP面向对象编程,程序猫速率看过来! PHP开源脚本语言PHP(外文名: Hypertext Preprocessor,中文名:"超文本预处理器")是一种通用开源 ...

  7. GitHub 支持上传视频文件啦!

    大家好,我是若川.今天周六,分享一篇热点新闻.文章较短,预计5分钟可看完. 近日 Github 宣布支持了视频上传功能,意味着,大家在提 issue 时可以携带视频了,这极大地提高了开发者和维护者的效 ...

  8. html上传视频文件前端显示,文件分片上传之前端文件分片

    分片上传的原理就是在前端将文件分片,然后一片一片的传给服务端,由服务端对分片的文件进行合并,从而完成大文件的上传.分片上传可以解决文件上传过程中超时.传输中断造成的上传失败,而且一旦上传失败后,已经上 ...

  9. php微信上传视频文件在哪里,微信小程序中实现上传视频的开发代码

    本篇文章给大家带来的内容是关于微信小程序中实现上传视频的开发代码,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 其实这个比较简单,官方提供了API接口,基本上直接调用就可以了,话不多 ...

最新文章

  1. LeetCode实战:相交链表
  2. 每日一皮:程序猿的读书历程,最后一本​必备​!
  3. 数学(莫比乌斯反演):HAOI 2011 问题B
  4. list 操作 java_Java,List操作技巧
  5. PyTorch 学习笔记(六):PyTorch的十八个损失函数
  6. parallels desktop big sur 网络_初中生数学网络学习哪个好
  7. java引用队列_java的强引用、软引用、弱引用、幻象引用,引用队列总结
  8. 酷信即时通讯源码,视酷即时通讯的升级版,性能高2-5倍,高性能企业即时通讯产品
  9. 微信小程序中转义字符的处理
  10. 组建项目团队-执行过程组
  11. Java--验证码登录
  12. 解决AE在mac big sur系统上安装闪退打不开问题,最新After Effects 2021 for Mac中文直装(ae 2021 mac)详细安装教程
  13. 有一个网页地址, 比如百度主页: https://www.baidu.com/ 如何得到它的内容?
  14. AutoAugment介绍及论文解析
  15. switchery开关使用
  16. android撕衣服应用介绍,Android开发基础面试题
  17. 初级黑客必需撑握的8个DOS命令
  18. A-Z,a-z,0-9的unicode编码表
  19. Java 判断年份是闰年还是平年
  20. 深入了解C++linux工程师的技术需求,为你以后的职业发展定方向

热门文章

  1. Word怎么批量删除空行和空格?有技巧很简单!
  2. 移相电路设计 RC移相改进电路设计
  3. od 追踪_裁判员行为规范【基本功】——追踪裁判违例宣判练习 / 两次运球违例...
  4. 社区供稿 | 中文 LangChain 项目的实现开源工作
  5. 使用数据处理技能优化Draftkings NBA阵容
  6. 免疫优化算法在物流配送中心选址中的应用(Matlab代码实现)
  7. python处理Excel表格--写入Excel表格
  8. 计算机网络报告书,河北工业大学计算机网络课程设计报告书
  9. php底部悬浮广告,底部悬浮通栏可以关闭广告位详解(一)
  10. 在html调节元素左右间距,HTML元素间距问题