1. 云栖社区>
  2. PHP教程>
  3. 正文

php+ajax无刷新上传图片实例代码

作者:用户 来源:互联网 时间:2017-12-01 20:09:56

图片实例代码

php+ajax无刷新上传图片实例代码 - 摘要: 本文讲的是php+ajax无刷新上传图片实例代码, 本文分享了php结合ajax实现无刷新上传图片的实例代码,分享给大家,希望大家可以和小编一起学习学习,共同进步。1.引入文件<!--图片上传begin--><script type="text/javascript" s


本文分享了php结合ajax实现无刷新上传图片的实例代码,分享给大家,希望大家可以和小编一起学习学习,共同进步。

1.引入文件

<!--图片上传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" /><!--图片上传end-->


2.html部分

<div class="upimg">       <input name="icon" type="text" class="imgsrc" value="<!--{$contents.icon}-->" />       <div class="showimg"><!--{if $contents.icon}--><img src="<!--{$contents.icon}-->" height="120px"><!--{/if}-->       </div> <div class="btn" style="height:20px;">  <span>添加图片</span>  <input class="fileupload" type="file" name="pic[]">       </div>       </div>


3.给fileupload加上表单

/*图片上传*/  $(".fileupload").wrap("<form action='/bookstore/book/uploadpic' method='post' enctype='multipart/form-data'></form>"); //函数处理


4.ajax文件上传

jQuery(function ($) {   $(".fileupload").change(function(){ //选择文件     if ('' === $(this).val()) return;    var upimg = $(this).parent().parent().parent();    var showimg = upimg.find('.showimg');    var btn = upimg.find('.btn span');    var imgsrc = upimg.find('.imgsrc');    $(this).parent().ajaxSubmit({       //dataType: 'json', //数据格式为json       beforeSend: function() { //开始上传 showimg.empty(); //清空显示的图片 imgsrc.val("");btn.html("上传中..."); //上传按钮显示上传中       },       uploadProgress: function(event, position, total, percentComplete) {       },       success: function(data) { //成功 //获得后台返回的json数据,显示文件名,大小,以及删除按钮 var img = data;//显示上传后的图片 imgsrc.val("");imgsrc.val(img);showimg.html("<img width='120' height='120' src='"+img+"'>"); btn.html("上传成功"); //上传按钮还原       },       error:function(xhr){ //上传失败 btn.html("上传失败");       }     });   }); });


5.后台进行处理



public function uploadpicAction(){ //图片上传和显示    $data = "";    $src = $this->uploadFiles2($imgpath = "/upload/book" ,$filesname = "pic");  isset($src[0]['src']) && $src[0]['src'] ? $data = $this->concaturl($src[0]['src']) : null;    echo $data;   }


6.将返回的数据交给前端,进行一些处理。

进而提交到后台数据库。

php+ajax无刷新上传图片实例代码
希望本文所述对大家学习php程序设计有所帮助。php+ajax无刷新上传图片实例代码

以上是云栖社区小编为您精心准备的的内容,在云栖社区的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索图片 , 实例 代码 ,以便于您获取更多的相关知识。