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


Posted in PHP onNovember 17, 2015

本文分享了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 相关文章推荐
海河写的 Discuz论坛帖子调用js的php代码
Aug 23 PHP
php中用文本文件做数据库的实现方法
Mar 27 PHP
如何用php获取程序执行的时间
Jun 09 PHP
使用PHP静态变量当缓存的方法
Nov 13 PHP
PHP父类调用子类方法的代码例子
Apr 09 PHP
Thinkphp中的volist标签用法简介
Jun 18 PHP
php使用Jpgraph绘制柱形图的方法
Jun 10 PHP
Yii2增删改查之查询 where参数详细介绍
Aug 08 PHP
PHP未登录自动跳转到登录页面
Dec 21 PHP
Thinkphp自定义生成缩略图尺寸的方法
Aug 05 PHP
TP5框架实现自定义分页样式的方法示例
Apr 05 PHP
禁止直接访问php文件代码分享
May 05 PHP
php计算年龄精准到年月日
Nov 17 #PHP
php实现简单的上传进度条
Nov 17 #PHP
PHP安装threads多线程扩展基础教程
Nov 17 #PHP
超详细的php用户注册页面填写信息完整实例(附源码)
Nov 17 #PHP
教大家制作简单的php日历
Nov 17 #PHP
PHP YII框架开发小技巧之模型(models)中rules自定义验证规则
Nov 16 #PHP
PHP Yii框架之表单验证规则大全
Nov 16 #PHP
You might like
php一句话cmdshell新型 (非一句话木马)
2009/04/18 PHP
php 自写函数代码 获取关键字 去超链接
2010/02/08 PHP
php不使用插件导出excel的简单方法
2014/03/04 PHP
php多功能图片处理类分享(php图片缩放类)
2014/03/14 PHP
PHP实现驼峰样式字符串(首字母大写)转换成下划线样式字符串的方法示例
2017/08/10 PHP
PHP校验15位和18位身份证号的类封装
2018/11/07 PHP
你必须知道的Javascript知识点之&quot;this指针&quot;的应用
2013/04/23 Javascript
jquery xMarquee实现文字水平无缝滚动效果
2014/04/29 Javascript
jQuery中extend函数详解
2015/02/13 Javascript
JS中字符串trim()使用示例
2015/05/26 Javascript
nodejs修复ipa处理过的png图片
2016/02/17 NodeJs
页面get请求 中文参数方法乱码问题的快速解决方法
2016/05/31 Javascript
全面解析DOM操作和jQuery实现选项移动操作代码分享
2016/06/07 Javascript
Nodejs中解决cluster模块的多进程如何共享数据问题
2016/11/10 NodeJs
react.js 翻页插件实例代码
2017/01/19 Javascript
jQuery实现的手风琴侧边菜单效果
2017/03/29 jQuery
Javascript中 toFixed四舍六入方法
2017/08/21 Javascript
React diff算法的实现示例
2018/04/20 Javascript
微信公众平台 客服接口发消息的实现代码(Java接口开发)
2019/04/17 Javascript
vue+element获取el-table某行的下标,根据下标操作数组对象方式
2020/08/07 Javascript
Python中Django框架下的staticfiles使用简介
2015/05/30 Python
Python+Wordpress制作小说站
2017/04/14 Python
Python3.6简单的操作Mysql数据库的三个实例
2018/10/17 Python
Python3使用PySynth制作音乐的方法
2019/09/09 Python
django的模型类管理器——数据库操作的封装详解
2020/04/01 Python
.net C#面试题
2012/08/28 面试题
党员的自我评价范文
2014/01/02 职场文书
《争吵》教学反思
2014/02/15 职场文书
优秀会计求职信
2014/07/04 职场文书
工作说明书格式
2014/07/29 职场文书
师德先进个人事迹材料
2014/12/19 职场文书
纯CSS实现酷炫的霓虹灯效果
2021/04/13 HTML / CSS
Python中json.dumps()函数的使用解析
2021/05/17 Python
Golang标准库syscall详解(什么是系统调用)
2021/05/25 Golang
用python批量解压带密码的压缩包
2021/05/31 Python
Oracle11g R2 安装教程完整版
2021/06/04 Oracle