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插件的更多相关文章

  1. jquery插件课程2 放大镜、多文件上传和在线编辑器插件如何使用

    jquery插件课程2 放大镜.多文件上传和在线编辑器插件如何使用 一.总结 一句话总结:插件使用真的还是比较简单的,引包,初始化,配置参数(json),配置数据(json),而后两步不是必须的.而且 ...

  2. 视频大文件分片上传（使用webuploader插件）

    背景 公司做网盘系统,一直在调用图片服务器的接口上传图片,以前写的,以为简单改一改就可以用 最初要求 php 上传多种视频格式,支持大文件,并可以封面截图,时长统计 问题 1.上传到阿里云服务器,13 ...

  3. 文件上传之——用SWF插件实现文件异步上传和头像截取

    之前写过几篇文件上传,那些都不错.今天小编带领大家体会一种新的上传方法,及使用Flash插件实现文件上传. 使用Flash的好处就是可以解决浏览器兼容性问题.之前我写的一个快捷复制功能也是利用的Fla ...

  4. jquery文件上传控件 WebUploader

    WebUploader是百度开源的一个文件上传组件,因为其操作简洁大方,就在项目中使用了,记录一下. 效果是这样子:  这个样子是默认的效果.  这个是选择上传的图片,可以批量,选择后可以删除和添加更 ...

  5. 大文件上传控件webupload插件

    之前仿造uploadify写了一个HTML5版的文件上传插件,没看过的朋友可以点此先看一下~得到了不少朋友的好评,我自己也用在了项目中,不论是用户头像上传,还是各种媒体文件的上传,以及各种个性的业务需 ...

  6. jquery插件文件上传

    文件上传有很多jQuery插件,一般我最为常用的就是uploadify.js和ajaxfileupload.js,二者都是以file标签为依托,前者需要在页面初始化时就渲染插件,比较适合单纯的文件上传 ...

  7. Asp.Net Core 2.0 WebUploader FastDfs 文件上传 分段上传

    功能点: 1. 使用.net core 2.0 实现文件上传 2. 使用webuploader实现单文件,多文件上传 3. 使用webuploader实现大文件的分段上传. 4. 使用webuploa ...

  8. SpringBoot下文件上传与下载的实现

    原文:http://blog.csdn.net/colton_null/article/details/76696674 SpringBoot后台如何实现文件上传下载? 最近做的一个项目涉及到文件上传 ...

  9. java文件上传-原始的Servlet方式

    前言: 干了这几个项目,也做过几次文件上传下载,要么是copy项目以前的代码,要么是百度的,虽然做出来了,但学习一下原理弄透彻还是很有必要的.刚出去转了一圈看周围有没有租房的,在北京出去找房子是心里感 ...

随机推荐

  1. day57 jQuery基础

    目录 一.操作标签 1 位置操作 2 尺寸 3 文本操作 4 获取值操作 5 属性操作 6 获取属性的特例 7 文档处理 二.事件 1 克隆事件 2 自定义模态框 3 左侧菜单 4 回到顶部 5 输入 ...

  2. DVWA学习记录 PartⅦ

    SQL Injection 1. 题目 SQL Injection,即SQL注入,是指攻击者通过注入恶意的SQL命令,破坏SQL查询语句的结构,从而达到执行恶意SQL语句的目的. 2. Low a. ...

  3. linux09 /消息队列、saltstack工具

    linux09 /消息队列.saltstack工具 目录 linux09 /消息队列.saltstack工具 1. 消息队列之rabbitmq 2. 云计算 3. 远程过程调用的实现:rpc 4. s ...

  4. jdk安装无反应解决方法

    找到该文件(隐藏文件),如果里面是只有空格,清空后重新安装就可以.若有内容设置INSTALL_SILENT=0 后重新安装.

  5. 不吹不擂，315 道 Python 面试题，欢迎挑战！

    各位大佬暂时先来315道题尝尝吧,后面有时间再继续补充. 有缘人如果看到这些题,不妨留言一下答案,来证明下你到底有多水,哈哈哈哈哈刀哈哈哈哈哈哈 第一部分 Python基础篇(80题) 1.为什么学习 ...

  6. ciscn_2019_c_1

    0x01 检查文件,64位 检查开启的保护情况 开启了NX保护 0x02 IDA静态分析 在主函数这里并没有常见的gets栈溢出,尝试再这里面的子函数找找,发现了encrypt函数,进去查看 发现这个 ...

  7. Spring当中循环依赖很少有人讲，今天一起来学习！

    网上关于Spring循环依赖的博客太多了,有很多都分析的很深入,写的很用心,甚至还画了时序图.流程图帮助读者理解,我看了后,感觉自己是懂了,但是闭上眼睛,总觉得还没有完全理解,总觉得还有一两个坎过不去 ...

  8. nginx的基础学习+实战

    文章目录 一.前言 二.反向代理 三.负载均衡 四.动静分离 参考视频:尚硅谷Nginx教程(2019发布) 参考链接:Windows下Nginx负载均衡实现 一.前言 Nginx (engine x ...

  9. 数据库-SQL查询语言(一）

    SQL数据定义 DDL sql的DDL不仅能定义一组关系,还能定义每个关系的信息,包括: 每个关系的模式 每个属性的取值类型 完整性约束 每个关系的维护的索引集合 每个关系的安全性和权限信息 每个关系 ...

  10. JS内存机制

    在看JS内存机制之前我们先来看一下JS是门什么样的语言,他又有哪些变量类型. 动静态,强弱类型 静态:在使用之前就需要确认其变量数据类型. 动态:在运行过程中需要检查数据类型. 强类型:不支持隐式类型 ...