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. fiddler提示the system proxy was changed,Click to reanable capturing.导致无法抓包

    出现这个提示后,fiddler无法抓取请求. 在网上搜了很多方法,比较常见的解决办法如下: 方法1: 网络设置问题,既然是使用本地浏览器,那么只需要把IE浏览器的网络设置下: 面板上点击 Tools- ...

  2. Spring-boot 启动报错 调试小技巧

    描述: 我们在启动spring-boot,spring-cloud 项目时,是不是经常 遇到报错,但是在控制台 没有能找到 具体 报错信息,只是 提示,启动失败,缺乏具体的报错信息,这样就很不方便我们 ...

  3. MySQL数据库06 /数据库总结

    MySQL数据库06 /数据库总结 目录 MySQL数据库06 /数据库总结 1. 数据库/DBMS 2. 数据库分类 3. 修改密码 4. 库操作 5. 表操作 6. 存储引擎 7. 事务 8. 约 ...

  4. 数据可视化基础专题（十）：Matplotlib 基础（二） 自定义配置文件和绘图风格（rcParams和style）

    https://matplotlib.org/api/rcsetup_api.html#module-matplotlib.rcsetup 一.什么是rcParams?我们在使用matplotlibl ...

  5. 数据可视化之powerBI基础（十四）Power BI中创建联动切片器

    https://zhuanlan.zhihu.com/p/67564062 进行数据分析时,每个分析维度并不总是独立的,比如省份是一个维度,城市也是一个维度,而这两个维度之间是有逻辑关系的,那么在进行 ...

  6. nginx配置使用, 入门到实践

    1. 本文做自己学习配置使用, 转自: https://mp.weixin.qq.com/s?__biz=Mzg2MjEwMjI1Mg%3D%3D&chksm=ce0dae4df97a275b ...

  7. Python并发编程05 /死锁现象、递归锁、信号量、GIL锁、计算密集型/IO密集型效率验证、进程池/线程池

    Python并发编程05 /死锁现象.递归锁.信号量.GIL锁.计算密集型/IO密集型效率验证.进程池/线程池 目录 Python并发编程05 /死锁现象.递归锁.信号量.GIL锁.计算密集型/IO密 ...

  8. （4）webpack中配置css，scss，less第三方loader

    为什么要使用第三方loader 一般引入样式文件,我们会在html中引入样式标签. 很明显,这样就跟之前在script中引入js文件一样,会导致二次请求.我们希望webpack像处理js文件一样处理样 ...

  9. CISSP 考试经验分享

    复习资料: <Eleventh Hour CISSP> <汇哲培训讲义> <CISSP Official Security Professional>Eighth ...

  10. 【SpringBoot】 中时间类型 序列化、反序列化、格式处理

    [SpringBoot] 中时间类型 序列化.反序列化.格式处理 Date yml全局配置 spring: jackson: time-zone: GMT+8 date-format: yyyy-MM ...