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

 更新时间:2015年11月17日 14:56:18   作者:霍啸林  
这篇文章为大家分享了php+ajax无刷新上传图片实例代码,需要的朋友可以参考下

本文分享了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程序设计有所帮助。

相关文章

  • php查找字符串出现次数的方法

    php查找字符串出现次数的方法

    这篇文章主要介绍了php查找字符串出现次数的方法,较为详细的介绍了substr_count函数的用法,并补充说明了相关的字符串操作函数,具有一定的实用价值,需要的朋友可以参考下
    2014-12-12
  • 详解PHP队列的实现

    详解PHP队列的实现

    这篇文章主要介绍了PHP队列的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-03-03
  • PHP实现清除MySQL死连接的方法

    PHP实现清除MySQL死连接的方法

    这篇文章主要介绍了PHP实现清除MySQL死连接的方法,通过定时执行php脚本实现针对mysql死链接的检查与清除功能,需要的朋友可以参考下
    2016-07-07
  • php简单实现快速排序的方法

    php简单实现快速排序的方法

    这篇文章主要介绍了php简单实现快速排序的方法,涉及php针对数组与字符串的操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-04-04
  • PHP 中文处理技巧

    PHP 中文处理技巧

    做AJAX应用或Flash应用,提交中文内容到后台,涉及到编码解码(encode、decode)及编码格式的转换。
    2010-04-04
  • 简单实现php上传文件功能

    简单实现php上传文件功能

    这篇文章主要教大家如何简单实现php上传文件功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-09-09
  • PHP面向对象多态性实现方法简单示例

    PHP面向对象多态性实现方法简单示例

    这篇文章主要介绍了PHP面向对象多态性实现方法,简单说明了面向对象多态性的原理并结合具体实例给出了php实现多态性的相关操作技巧,需要的朋友可以参考下
    2017-09-09
  • PHP获取星期几的常用方法小结

    PHP获取星期几的常用方法小结

    这篇文章主要介绍了PHP获取星期几的常用方法,结合实例形式分析了php使用date函数获取指定日期星期几的具体操作技巧与相关注意事项,需要的朋友可以参考下
    2018-12-12
  • PHP实现微信JS-SDK接口选择相册及拍照并上传的方法

    PHP实现微信JS-SDK接口选择相册及拍照并上传的方法

    这篇文章主要介绍了PHP实现微信JS-SDK接口选择相册及拍照并上传的方法,涉及php微信接口的调用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2016-12-12
  • php 无法加载mysql的module的时候的配置的解决方案引发的思考

    php 无法加载mysql的module的时候的配置的解决方案引发的思考

    今天配置php 的时候,发现没配起mysql ,wordpress提示我需要 mysql 的module之后上google搜索,大多数都是说php.ini 没加载起
    2012-01-01

最新评论