怎么用PHP+Ajax实现无刷新上传头像图片预览功能
这篇文章主要讲解了“怎么用PHP+Ajax实现无刷新上传头像图片预览功能”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“怎么用PHP+Ajax实现无刷新上传头像图片预览功能”吧!
上传头像区域<divclass="avatar_area"><ahref="javascript:void(0);"class="avatar_uplpad_btn"id="avatar_uplpad_btn"></a><divid="avatar_pic"><imgalt="充值"src="anniu.jpg"/></div></div>引入jQuery库和plupload上传组件
<scripttype="text/javascript"src="jquery.js"></script><scripttype="text/javascript"src="plupload/plupload.full.min.js"></script>plupload单图片上传配置
varuploader_avatar=newplupload.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){//文件上传前uploader_avatar.start();},UploadProgress:function(up,file){//上传中,显示进度条varpercent=file.percent;$("#"+file.id).find('.bar').css({"width":percent+"%"});$("#"+file.id).find(".percent").text(percent+"%");},FileUploaded:function(up,file,info){//文件上传成功的时候触发vardata=eval("("+info.response+")");//解析返回的json数据$("#avatar_pic").html("<imgsrc='"+data.pic+"'/>")},Error:function(up,err){//上传出错的时候触发alert(err.message);}}});uploader_avatar.init();
感谢各位的阅读,以上就是“怎么用PHP+Ajax实现无刷新上传头像图片预览功能”的内容了,经过本文的学习后,相信大家对怎么用PHP+Ajax实现无刷新上传头像图片预览功能这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是亿速云,小编将为大家推送更多相关知识点的文章,欢迎关注!
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。