【Plupload插件】基础使用教程

最新推荐文章于 2024-04-28 10:55:39 发布

VIP文章不大好不大好

最新推荐文章于 2024-04-28 10:55:39 发布

阅读量5.1k

点赞数 1

分类专栏：我不信学不会JavaScript 文章标签： javascript js

本文链接：https://blog.csdn.net/weixin_44707049/article/details/115654084

版权

前言
Plupload是一款由著名的web编辑器TinyMCE团队开发的上传组件，简单易用且功能强大。
特点

拥有多种上传方式：HTML5、flash、silverlight以及传统的。Plupload会自动侦测当前的环境，选择最合适的上传方式，并且会优先使用HTML5的方式。所以你完全不用去操心当前的浏览器支持哪些上传方式，Plupload会自动为你选择最合适的方式。
支持以拖拽的方式来选取要上传的文件
支持在前端压缩图片，即在图片文件还未上传之前就对它进行压缩
可以直接读取原生的文件数据，这样的好处就是例如可以在图片文件还未上传之前就能把它显示在页面上预览
支持把大文件切割成小片进行上传，因为有些浏览器对很大的文件比如几G的一些文件无法上传。

文章说明
这篇文章只是示范一下plupload插件的基础使用方法，整体流程是新建一个HTML文件引入plupload插件，然后绑定HTML页面的选择文件按钮和开始上传按钮，点击选择文件按钮进行文件选择，点击开始上传按钮进行文件上传，后台用PHP写，图片保存在PHP文件同级目录下的imgs文件夹里面。
第一步：下载plupload插件

下载网址：https://www.plupload.com/

在这里插入图片描述
第二步：新建项目，引入插件
这是我的目录结构，Demo文件夹下放着这篇文章的HTML文件和JS文件，PHP文件夹下放着后台文件以及上传的图片

第三步：代码编写

pluploadDemo.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>

		<title>PluploadDemo</title>

		<!-- production -->
		<script type="text/javascript" src="../js/plupload.full.min.js"></script>

		<style type="text/css">
			#main{
    
				width: 50%;
				margin: 10% auto;
			}
			#filelist,#console{
    
				background-color: white;
				border-radius: 3px;
				margin: 15px 0;
				padding: 5px;
				overflow: auto;
			}
			#filelist{
    
				height: 200px;
			}
			#container{
    
				text-align: center;
			}
		</style>

	</head>
	<body style="font: 13px Verdana; background: #eee; color: #333">
		<div id="main">
			<div id="filelist">
				<!-- 文件列表显示区域 -->
			</div>
			<div id="console" style="display: none;">
				<!-- 控制台信息显示区域,报错的时候才显示出来 -->
			</div>
			<div id="container">
				<button type="button" id="pickfiles">选择文件</button>
				<button type="button" id="uploadfiles">开始上传</button>
			</div>		
		</div>
		<script src="pluploadDemo.js" type="text/javascript" charset="utf-8"></script>
	</body

最低0.47元/天解锁文章

不大好不大好

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
【Plupload插件】基础使用教程

前言Plupload是一款由著名的web编辑器TinyMCE团队开发的上传组件，简单易用且功能强大。特点拥有多种上传方式：HTML5、flash、silverlight以及传统的。Plupload会自动侦测当前的环境，选择最合适的上传方式，并且会优先使用HTML5的方式。所以你完全不用去操心当前的浏览器支持哪些上传方式，Plupload会自动为你选择最合适的方式。支持以拖拽的方式来选取要上传的文件支持在前端压缩图片，即在图片文件还未上传之前就对它进行压缩可以直接读取原生的文件数据，这样的好处就
复制链接

扫一扫