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. Python 读取Excel之xlrd篇

    上一期给大家分享了如何用Python读取文本,这次给大家分享如何读取Excel表格内容,拿最常见的.xlsx和.xls格式来讲解. 本章主要知识点有: 读取整篇excel返回list[list[lis ...

  2. celery 基础教程（一）：工作流程，架构以及概念

    1.工作流程 celery通过消息进行通信,通常使用一个叫Broker(中间人)来协client(任务的发出者)和worker(任务的处理者). clients发出消息到队列中,broker将队列中的 ...

  3. POJ 1046 Color Me Less 最详细的解题报告

    题目来源:POJ 1046 Color Me Less 题目大意:每一个颜色由R.G.B三部分组成,D=Math.sqrt(Math.pow((left.red - right.red), 2)+ M ...

  4. day3：强制类型转换&自动类型转换&变量缓存机制

    1.Number的强制类型转换(int,float,bool,complex) 1.int 强制转换成整形 float可以转化成int bool可以转化成int str(形如"123&quo ...

  5. 尝鲜刚发布的 SpringFox 3.0.0，以前造的轮子可以不用了...

    最近 SpringFox 3.0.0 发布了,距离上一次大版本2.9.2足足有2年多时间了.可能看到这个名字,很多读者会有点陌生.但是,只要给大家看一下这两个依赖,你就知道了! <depende ...

  6. JAVA I/O基本操作

    JAVA I/O基本操作 JAVA文件操作 JAVA字节流 JAVA字符流 JAVA缓存流 JAVA对象流 JAVA数据流 本文主要借鉴以下博客和网站: how2j.cn 深入理解java中的I/O ...

  7. win10里面怎么获取最高管理员权限

    Windows10专业版 1,按下win+R键唤出“运行”窗口,输入gpedit.msc. 2,这时打开了组策略编辑器,在左边找到“计算机配置-Windows 设置”,再进入右边“安全设置”,如图. ...

  8. Win10系统报错问题集锦

    收集记录win10的坑 错误1 应用程序-特定 权限设置并未向在应用程序容器 不可用 SID (不可用)中运行的地址 LocalHost (使用 LRPC) 中的用户 NT AUTHORITY\SYS ...

  9. 按钮放到图片上，z-index和绝对定位

    说明: 最近在做一个banner轮播图 图的左下方有个 登录的按钮. 按钮死活都放不到图片上边,css太菜  特此记录一下 摆放下效果: 无论 轮播图怎么动 按钮不动 思路: 布局   banner轮 ...

  10. 【NeurlPS2019】Positional Normalization 位置归一化

    作者提出,当前的BatchNorm, GroupNorm, InstanceNorm在空间层面归一化信息,同时丢弃了统计值.作者认为这些统计信息中包含重要的信息,如果有效利用,可以提高GAN和分类网络 ...