【Plupload插件】基础使用教程

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

  1. 拥有多种上传方式:HTML5、flash、silverlight以及传统的。Plupload会自动侦测当前的环境,选择最合适的上传方式,并且会优先使用HTML5的方式。所以你完全不用去操心当前的浏览器支持哪些上传方式,Plupload会自动为你选择最合适的方式。
  2. 支持以拖拽的方式来选取要上传的文件
  3. 支持在前端压缩图片,即在图片文件还未上传之前就对它进行压缩
  4. 可以直接读取原生的文件数据,这样的好处就是例如可以在图片文件还未上传之前就能把它显示在页面上预览
  5. 支持把大文件切割成小片进行上传,因为有些浏览器对很大的文件比如几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
  • 1
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在Vue3中使用Plupload的步骤如下: 1. 首先,你需要在项目中引入Plupload。你可以通过在GitHub上下载并安装Plupload,或者使用npm install --save plupload命令安装Plupload依赖。 2. 在Vue组件中实例化一个Plupload对象,并传入一个配置参数对象来进行各种配置。你可以根据需要配置上传方式、限制文件类型、压缩图片等功能。 3. 调用Plupload实例对象的init()方法进行初始化。这将初始化Plupload并准备好进行文件上传。 4. 在Plupload实例对象上注册你需要的事件。Plupload提供了多种事件,可以在文件选取、上传进度、上传完成等不同阶段与Plupload进行交互。 以下是一个在Vue3中使用Plupload的示例代码: ```vue <template> <div> <plupload :file-list="theDialogForm.attachJsonArr" :limit="1" biz-type="trainModule" accept-files=".zip,.rar,.xml,.txt,.pdf,.docx,.doc,.xlsx,.xls,.ppt,.pptx,.mp4,.mp3,.gif,.png,.jpg,.jpeg,.bmp" @onChange="handleFileChange" /> </div> </template> <script> import Plupload from 'plupload' // 引入Plupload库 export default { data() { return { theDialogForm: { attachJsonArr: [] // 文件列表 } } }, mounted() { const uploader = new Plupload({ // 实例化Plupload对象 // 配置参数 }) uploader.init() // 初始化Plupload // 注册事件 uploader.bind('FilesAdded', (uploader, files) => { // 当文件添加到上传队列时触发的事件 }) // 更多事件... }, methods: { handleFileChange(fileList) { console.log('handleFileChange', fileList) } } } </script> ``` 以上代码示例中,我们在Vue组件中引入了Plupload库,实例化了Plupload对象,并在mounted钩子函数中进行了初始化和事件的注册。同时,我们定义了一个handleFileChange方法来处理文件变化事件。你可以根据自己的需求进行相应的配置和事件处理。<span class="em">1</span><span class="em">2</span><span class="em">3</span>

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值