素材牛VIP会员

jquery+php+ajax+plupload插件实现无刷新头像上传并预览功能

 所属分类:PHP/MySql-Ajax,上传

 浏览:10500次-  下载:117次-  评论:20次-  更新时间:2022-06-13
jquery+php+ajax+plupload插件实现无刷新头像上传并预览功能
积分说明:注册即送10牛币,每日签到可获得5牛币,成为VIP会员可永久免牛币下载!   充值积分   充值会员   更多说明»
素材描述:Plupload是一款由著名的web编辑器TinyMCE团队开发的上传组件,简单易用且功能强大,我们完全可以使用Plupload来代替以前的SWFUpload。

详细介绍

Plupload有以下功能和特点:

1、拥有多种上传方式:HTML5、flash、silverlight以及传统的type=file” 。Plupload会自动侦测当前的环境,选择最合适的上传方式,并且会优先使用HTML5的方式。所以你完全不用去操心当前的浏览器支持哪些上传方式,Plupload会自动为你选择最合适的方式。

2、支持以拖拽的方式来选取要上传的文件

3、支持在前端压缩图片,即在图片文件还未上传之前就对它进行压缩

4、可以直接读取原生的文件数据,这样的好处就是例如可以在图片文件还未上传之前就能把它显示在页面上预览

5、支持把大文件切割成小片进行上传,因为有些浏览器对很大的文件比如几G的一些文件无法上传。

使用方法:

载入jQuery库文件和插件

<script type="text/javascript" src="jquery.js">script><script type="text/javascript" src="plupload/plupload.full.min.js">script>

初始化和配置、操作(主要看注释)

var uploader_avatar = new plupload.Uploader({//创建实例的构造方法
	runtimes: 'gears,html5,html4,silverlight,flash', //上传插件初始化选用那种方式的优先级顺序
	browse_button: ['avatar_uplpad_btn'], // 上传按钮
	url: "ajax.php", //远程上传地址
	flash_swf_url: 'js/plugins/plupload/Moxie.swf', //flash文件地址
	silverlight_xap_url: 'js/plugins/plupload/Moxie.xap', //silverlight文件地址
	filters: {
		max_file_size: '10mb', //最大上传文件大小(格式100b, 10kb, 10mb, 1gb)
		mime_types: [//允许文件上传类型
			{title: "files", extensions: "jpg,png,gif,jpeg"}
		]
	},
	multi_selection: false, //true:ctrl多文件上传, false 单文件上传
	init: {
		FilesAdded: function(up, files) { //文件上传前
			$("#avatar_pic").hide();
			$("#loading_bar").show();
			uploader_avatar.start();
		},
		UploadProgress: function(up, file) { //上传中,显示进度条var percent = file.percent;
			$("#percent").css({"width": percent + "%"});
			$("#percentnum").text(percent + "%");
		},
		FileUploaded: function(up, file, info) { //文件上传成功的时候触发var data = eval("(" + info.response + ")");//解析返回的json数据
			$("#avatar_pic").html("<img src="" + data.pic + "" class="">");
			$("#loading_bar").hide();
			$("#avatar_pic").show();
		},		Error: function(up, err) { //上传出错的时候触发
			alert(err.message);
			$("#loading_bar").hide();
		}
	}
});
uploader_avatar.init();

HTML部分:

<div class="avatar_area" style="margin:120px 0 0;text-align: center;min-height: 300px"><a href="javascript:void(0);"class="avatar_uplpad_btn" id="avatar_uplpad_btn">a><div id="avatar_pic" style="margin:30px 0 0"><img src="images/head.png"/>div><div id="loading_bar" style="display:none"><p id="updesc">图片上传中...p><span class="loading_bar"><em id="percent" style="width: 27%;">em>span><span id="percentnum">27%span>div>div>

上传格式的配置和路径的配置(ajax.php)

$typeArr = array("jpg", "png", "gif", "jpeg", "mov", "gears", "html5", "html4", "silverlight", "flash"); //允许上传文件格式$path = "uploads/"; //上传路径


相关素材 - Ajax,上传

讨论这个素材(20)回答他人问题或分享使用心得会奖励牛币

闪***星  
2016年08月05日

比较实用的插件,拿走了

回复
20***16  
2016年12月01日

投稿的上传好像就是这个

嗯***上:哦?是吗
wx***03:?
回复
ok***07  
2017年10月19日

这个不错~收藏了~

回复
我***花  
2017年10月24日

希望有用 哦

嗯***上:还可以,手机上会有点问题
回复
奢***品  
2017年11月29日

毕业素材 可以用来

回复
z5***75  
2017年12月13日

实用

回复
华***n  
2017年12月15日

很实用的插件,感谢分享

回复
14***28  
2018年02月07日

很实用的插件,感谢分享

回复
金***物  
2018年09月04日

感觉很不错啊

回复
艺***技  
2018年09月14日

这个不错!应该能用

回复
嗯***上  
2018年10月16日

手机上不能用,电脑上用挺不错

回复
ha***ok  
2019年05月16日

不知道苹果能不能用

回复
艺***技  
2019年09月26日

好东西!

回复
sc***89  
2020年04月25日

手机上不能用,电脑上用挺不错

回复
qq***16  
2021年06月04日

不错,收藏了

回复
wx***75  
2021年11月27日

不错不错,挺好的

回复
qq***52  
2021年12月09日

不错不错

回复
qq***41  VIP1
2022年02月04日

实用,很好!

回复
qq***85  
2022年06月15日

不错

回复
 文明上网,理性发言!   😉 阿里云幸运券,戳我领取
我的牛币余额:0 已下载次数:117
所需牛币:20 开始下载

牛币获取:签到、评论、充值    » 在线充值(10牛币=1元)