本文分享了php结合ajax实现无刷新上传图片的实例代码，分享给大家，希望大家可以和小编一起学习学习，共同进步。
1.引入文件
<!---ecms 图片上传begin--><script type="text/javascript" src="/js/jquery.form.js"></script><script type="text/javascript" src="/js/uploadImg.js"></script><link href="/css/uploadImg.css" rel="stylesheet" type="text/css" /><!---ecms 图片上传end-->
2.html部分
<div class="upimg"> <input name="icon" type="text" class="imgsrc" value="<!---ecms {$contents.icon}-->" /> <div class="showimg"> <!---ecms {if $contents.icon}--> "%20height="120px">%20%20%20%20%20%20%20%20<!---ecms%20{/if}-->%20%20%20%20%20%20%20</div>%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20<div>%20%20%20%20%20%20%20%20%20%20<span>添加图片</span>%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20</div>%20%20%20%20%20%20%20</div>%20
3.给fileupload加上表单
/*图片上传*/%20%20$(".fileupload").wrap("");%20//函数处理
4.ajax文件上传
jQuery(function%20($)%20{%20%20%20$(".fileupload").change(function(){%20//选择文件%20%20%20%20%20if%20(''%20===%20$(this).val())%20return;%20%20%20%20var%20upimg%20=%20$(this).parent().parent().parent();%20%20%20%20var%20showimg%20=%20upimg.find('.showimg');%20%20%20%20var%20btn%20=%20upimg.find('.btn%20span');%20%20%20%20var%20imgsrc%20=%20upimg.find('.imgsrc');%20%20%20%20$(this).parent().ajaxSubmit({%20%20%20%20%20%20%20//dataType:%20'json',%20//数据格式为json%20%20%20%20%20%20%20beforeSend:%20function()%20{%20//开始上传%20%20%20%20%20%20%20%20%20showimg.empty();%20//清空显示的图片%20%20%20%20%20%20%20%20%20imgsrc.val("");%20%20%20%20%20%20%20%20btn.html("上传中...");%20//上传按钮显示上传中%20%20%20%20%20%20%20},%20%20%20%20%20%20%20uploadProgress:%20function(event,%20position,%20total,%20percentComplete)%20{%20%20%20%20%20%20%20},%20%20%20%20%20%20%20success:%20function(data)%20{%20//成功%20%20%20%20%20%20%20%20%20//获得后台返回的json数据，显示文件名，大小，以及删除按钮%20%20%20%20%20%20%20%20%20var%20img%20=%20data;%20%20%20%20%20%20%20%20//显示上传后的图片%20%20%20%20%20%20%20%20%20imgsrc.val("");%20%20%20%20%20%20%20%20imgsrc.val(img);%20%20%20%20%20%20%20%20showimg.html("");%20%20%20%20%20%20%20%20%20btn.html("上传成功");%20//上传按钮还原%20%20%20%20%20%20%20},%20%20%20%20%20%20%20error:function(xhr){%20//上传失败%20%20%20%20%20%20%20%20%20btn.html("上传失败");%20%20%20%20%20%20%20}%20%20%20%20%20});%20%20%20});%20});%20
5.后台进行处理
public%20function%20uploadpicAction(){%20//图片上传和显示%20%20%20%20$data%20=%20"";%20%20%20%20$src%20=%20$this->uploadFiles2($imgpath%20=%20"/upload/book"%20,$filesname%20=%20"pic");%20%20%20%20%20%20%20%20%20%20isset($src[0]['src'])%20&&%20$src[0]['src']%20?%20$data%20=%20$this->concaturl($src[0]['src'])%20:%20null;%20%20%20%20echo2本文来源gao!daima.com搞$代!码网
搞代gaodaima码%20$data;%20%20%20}
6.将返回的数据交给前端，进行一些处理。
进而提交到后台数据库。
希望本文所述对大家学习php程序设计有所帮助。
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：php+ajax无刷新上传图片实例代码_php技巧
转载请注明原文链接：php+ajax无刷新上传图片实例代码_php技巧
