文件上传 tp3.2 webuploader插件
1.新建上传页面
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge"> <!--引入CSS-->
<link rel="stylesheet" type="text/css" href="__ROOT__/public/webuploader/webuploader.css"> <title>Document</title>
</head>
<body>
<div id="uploader" class="wu-example">
<!--用来存放文件信息-->
<div id="thelist" class="uploader-list"></div>
<div class="btns">
<div id="picker">选择文件</div>
<button id="ctlBtn" class="btn btn-default">开始上传</button>
</div>
</div>
</body>
</html> <!--引入JS-->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="__ROOT__/public/webuploader/webuploader.min.js"></script>
<script>
let uploader = new WebUploader.Uploader({ // swf文件路径
swf: '__ROOT__/public/webuploader/Uploader.swf', // 文件接收服务端。
server: '__ROOT__/public/upload.php', // 选择文件的按钮。可选。
// 内部根据当前运行是创建,可能是input元素,也可能是flash.
pick: '#picker', // 分片上传。
chunked: true,
chunkSize: 2 * 1024 * 1024, // 不压缩image, 默认如果是jpeg,文件上传前会压缩一把再上传!
resize: false
}); let $list = $('#thelist');
// 当有文件被添加进队列的时候
uploader.on( 'fileQueued', function( file ) {
$list.append( '<div id="' + file.id + '" class="item">' +
'<h4 class="info">' + file.name + '</h4>' +
'<p class="state">等待上传...</p>' +
'</div>' );
}); // 文件上传过程中创建进度条实时显示。
uploader.on( 'uploadProgress', function( file, percentage ) {
let $li = $( '#'+file.id ),
$percent = $li.find('.progress .progress-bar'); // 避免重复创建
if ( !$percent.length ) {
$percent = $('<div class="progress progress-striped active">' +
'<div class="progress-bar" role="progressbar" style="width: 0%">' +
'</div>' +
'</div>').appendTo( $li ).find('.progress-bar');
} $li.find('p.state').text('上传中'); $percent.css( 'width', percentage * 100 + '%' );
}); //开始上传
$('#ctlBtn').click(function () {
uploader.upload();
}); uploader.on( 'uploadSuccess', function( file, response ) {
if (response.status) {
$( '#'+file.id ).find('p.state').text('已上传');
} else {
$( '#'+file.id ).find('p.state').text(response.msg);
} }); uploader.on( 'uploadError', function( file ) {
$( '#'+file.id ).find('p.state').text('上传出错');
}); uploader.on( 'uploadComplete', function( file ) {
$( '#'+file.id ).find('.progress').fadeOut();
}); </script>
2.下载 webuploader插件
3.服务器 处理上传文件
<?php //储存分片 服务器目录
$tmp_dir = './upload/tmp_chunk/' . $_REQUEST['name'] . '/';
if (! is_dir($tmp_dir)) {
mkdir($tmp_dir, 0777, true);
}
move_uploaded_file($_FILES['file']['tmp_name'], $tmp_dir . $_REQUEST['chunk']); //合并分片 结果存储目录
if ($_REQUEST['chunk'] == $_REQUEST['chunks'] - 1) { //最后一个分片
$target_file = './upload/results/';
if (! is_dir($target_file)) {
mkdir($target_file, 0777, true);
}
$target_file .= $_REQUEST['name'];
$handle = fopen($target_file, 'x+');
for ($i=0; $i<$_REQUEST['chunks']; $i++) {
fwrite($handle, file_get_contents($tmp_dir . $i));
}
fclose($handle);
} $msg = [
'$_FILES' => json_encode($_FILES),
'$_REQUEST' => json_encode($_REQUEST),
];
echo json_encode(['status' => 1, 'msg' => json_encode($msg)]);
4.打开页面 上传文件 测试。
文件上传 tp3.2 webuploader插件的更多相关文章
- jquery插件课程2 放大镜、多文件上传和在线编辑器插件如何使用
jquery插件课程2 放大镜.多文件上传和在线编辑器插件如何使用 一.总结 一句话总结:插件使用真的还是比较简单的,引包,初始化,配置参数(json),配置数据(json),而后两步不是必须的.而且 ...
- 视频大文件分片上传(使用webuploader插件)
背景 公司做网盘系统,一直在调用图片服务器的接口上传图片,以前写的,以为简单改一改就可以用 最初要求 php 上传多种视频格式,支持大文件,并可以封面截图,时长统计 问题 1.上传到阿里云服务器,13 ...
- 文件上传之——用SWF插件实现文件异步上传和头像截取
之前写过几篇文件上传,那些都不错.今天小编带领大家体会一种新的上传方法,及使用Flash插件实现文件上传. 使用Flash的好处就是可以解决浏览器兼容性问题.之前我写的一个快捷复制功能也是利用的Fla ...
- jquery文件上传控件 WebUploader
WebUploader是百度开源的一个文件上传组件,因为其操作简洁大方,就在项目中使用了,记录一下. 效果是这样子: 这个样子是默认的效果. 这个是选择上传的图片,可以批量,选择后可以删除和添加更 ...
- 大文件上传控件webupload插件
之前仿造uploadify写了一个HTML5版的文件上传插件,没看过的朋友可以点此先看一下~得到了不少朋友的好评,我自己也用在了项目中,不论是用户头像上传,还是各种媒体文件的上传,以及各种个性的业务需 ...
- jquery插件文件上传
文件上传有很多jQuery插件,一般我最为常用的就是uploadify.js和ajaxfileupload.js,二者都是以file标签为依托,前者需要在页面初始化时就渲染插件,比较适合单纯的文件上传 ...
- Asp.Net Core 2.0 WebUploader FastDfs 文件上传 分段上传
功能点: 1. 使用.net core 2.0 实现文件上传 2. 使用webuploader实现单文件,多文件上传 3. 使用webuploader实现大文件的分段上传. 4. 使用webuploa ...
- SpringBoot下文件上传与下载的实现
原文:http://blog.csdn.net/colton_null/article/details/76696674 SpringBoot后台如何实现文件上传下载? 最近做的一个项目涉及到文件上传 ...
- java文件上传-原始的Servlet方式
前言: 干了这几个项目,也做过几次文件上传下载,要么是copy项目以前的代码,要么是百度的,虽然做出来了,但学习一下原理弄透彻还是很有必要的.刚出去转了一圈看周围有没有租房的,在北京出去找房子是心里感 ...
随机推荐
- pigctf期末测评
pigctf期末测评 MISC 1 拿到图片,先binwalk一下,如下图 果然发现png图片后面跟了个ZIP,然后提取出来打开发现了一个flag.png,然后查看16进制文件没有发现什么问题,之后查 ...
- Shaderlab-10chapter-立方体纹理、玻璃效果
10.1.1天空盒子 window - Lighting - skyMaterial 创建mat,shader选自带的6 side shader 确保相机选skybox 如果某个相机需要覆盖,添加sk ...
- bzoj1682[Usaco2005 Mar]Out of Hay 干草危机*
bzoj1682[Usaco2005 Mar]Out of Hay 干草危机 题意: 给个图,每个节点都和1联通,奶牛要从1到每个节点(可以走回头路),希望经过的最长边最短. 题解: 求最小生成树即可 ...
- 数据结构中有关顺序表的问题:为何判断插入位置是否合法时if语句中用length+1,而移动元素的for语句中只用length?
bool ListInsert(SqList &L,int i, ElemType e){ if(i<||i>L.length+) //判断i的范围是否有效 return fals ...
- React js ReactDOM.render 语句后面不能加分号
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title&g ...
- Python+selenium自动化测试之浏览器基础操作
**前言** 本文主要讲解webdriber框架,Selenium 就像真实用户所做的一样,Selenium 测试可以在 Windows.Linux 和 Macintosh上的 Internet ...
- ionic环境安装步骤
注:准确性有待考证,仅供参考. 1,安装jdk 配置环境变量:java_home和path2,安装node 检查版本 node -v3,安装npm:npm i cnpm -g 检查版本:cnpm -v ...
- Mysql5.7前后修改用户密码变化
本文主要强调修改密码的sql语句变化.如果是root密码忘记了,请参考Mysql忘记root密码怎么解决 Mysql 5.7以前修改密码 update mysql.user set password= ...
- 性能测试 -- docker安装influxdb
一.前提 1.项目已经部署好 2.docker已经安装好 二.docker安装influxdb 1.下载influxdb镜像:docker pull tutum/influxdb 1)超时报错: ...
- hostapd阅读(openwrt)-1
好久没有来博客园写点东西了,这段时间主要搞了openwrt系统的移植,无线的校验等相关工作,鉴于我是一个懒惰的大龄菜鸟程序员,就先自我原谅自己了,好了废话少说,直奔主题--hostapd. 由于我主要 ...