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实现栈/队列/双端队列/链表

    栈是元素的有序集合,添加操作与移除操作都发生在其顶端,先进后出栈操作:创建空栈,增删(顶端),查(顶端元素,元素个数,是否为空)应用:将十进制数转换成任意进制数 class Stack: # 用列表创 ...

  2. JVM 专题七：运行时数据区（二）程序计数器

    1.程序计数器 1. 什么是PC寄存器(程序计数器)? JVM中的程序计数寄存器(Program Counter Register)中,Register的命名源于CPU的寄存器,寄存器存储指令相关的现 ...

  3. MYSQL 之 JDBC（四）： 增删改查（二）通过ResultSet执行查询操作

    /** * ResultSet:结果集.封装了使用JDBC进行查询的结果. * 1. 调用Statement对象的executeQuery(sql)方法 * 2. ResultSet返回的实际上就是一 ...

  4. Python Ethical Hacking - KEYLOGGER(3)

    Object-Oriented Programming Keylogger Classes Way of modeling program(blueprint). Logically group fu ...

  5. Ubuntu18.04安装Docker并部署(编译、发布、构建镜像)Asp.NetCore项目全过程笔记

      环境准备:阿里云Ubuntu18.04 全新安装   一.安装Docker 1.删除旧版本并更新包索引: sudo apt-get remove docker docker-engine dock ...

  6. Puppeteer爬虫实战(一)

    Puppeteer 爬虫技术实践 信息简介 Puppeteer是Chrome开发团队发布的一个通过Chrome DevTool Protocol来控制浏览器Chrome(下文若无显式称呼Chromiu ...

  7. java 集合区别

    TreeMap和TreeSet的区别 相同点: TreeMap和TreeSet都是有序的集合,也就是说他们存储的值都是排好序的. TreeMap和TreeSet都是非同步集合,因此他们不能在多线程之间 ...

  8. 解决react使用antd table组件固定表头后，表头和表体列不对齐以及配置fixed固定左右侧后行高度不对齐

    一.固定表头后表体列和表头不对齐 此问题可能在antd3.24.0版本之前都存在,反正3.16.2版本是存在这个问题的,如果是3.24.0之前的版本估计只能通过修改css样式解决. 按照官网说的: 1 ...

  9. 多个activity的博客参考，用mainactivity 调用 明天阅读一下

    https://blog.csdn.net/hbwxy521/article/details/53101019

  10. 【Logisim实验】构建立即数-随机存储器-寄存器的传送

    关于Logisim Logisim在仿真软件行列中算是比较直观的软件了,它能做的事情有很多,唯一不足的是硬件描述语言的支持,总体上来说适合比较底层的仿真,依赖于Hex值,通过线路逻辑设计能够较好的 关 ...