php+ajax无刷新上传图片的实现方法


Posted in PHP onDecember 06, 2016

本文实例讲述了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 相关文章推荐
PHP 配置文件中open_basedir选项作用
Jul 19 PHP
php 各种应用乱码问题的解决方法
May 09 PHP
php disk_free_space 返回目录可用空间
May 10 PHP
php中使用$_REQUEST需要注意的一个问题
May 02 PHP
PHP函数preg_match_all正则表达式的基本使用详细解析
Aug 31 PHP
基于PHP+jQuery+MySql实现红蓝(顶踩)投票代码
Aug 25 PHP
PHP+Apache+Mysql环境搭建教程
Aug 01 PHP
PHP正则匹配反斜杠'\'和美元'$'的方法
Feb 08 PHP
PDO::getAvailableDrivers讲解
Jan 28 PHP
PHP7使用ODBC连接SQL Server2008 R2数据库示例【基于thinkPHP5.1框架】
May 06 PHP
php 函数中静态变量使用的问题实例分析
Mar 05 PHP
php解析base64数据生成图片的方法
Dec 06 #PHP
php rsa 加密,解密,签名,验签详解
Dec 06 #PHP
php中namespace及use用法分析
Dec 06 #PHP
PHP实现的统计数据功能详解
Dec 06 #PHP
php+ajax简单实现全选删除的方法
Dec 06 #PHP
thinkPHP数据库增删改查操作方法实例详解
Dec 06 #PHP
thinkPHP中volist标签用法示例
Dec 06 #PHP
You might like
回帖脱衣服的图片实现代码
2014/02/15 PHP
ThinkPHP3.1.2 使用cli命令行模式运行的方法
2020/04/14 PHP
表单的一些基本用法与技巧
2006/07/15 Javascript
jquery BS,dialog控件自适应大小
2009/07/06 Javascript
jQuery JSON的解析方式分享
2011/04/05 Javascript
基于socket.io和node.js搭建即时通信系统
2014/07/30 Javascript
从数据库读取数据后将其输出成html标签的三种方法
2014/10/13 Javascript
jquery动态添加删除(tr/td)
2015/02/09 Javascript
Jquery-1.9.1源码分析系列(十一)之DOM操作
2015/11/25 Javascript
jQuery实现的放大镜效果示例
2016/09/13 Javascript
原生js实现返回顶部缓冲效果
2017/01/18 Javascript
node.js入门学习之url模块
2017/02/25 Javascript
JavaScript正则替换HTML标签功能示例
2017/03/02 Javascript
微信小程序 setData使用方法及常用错误解决办法
2017/05/11 Javascript
Vue实现active点击切换方法
2018/03/16 Javascript
Vue 组件传值几种常用方法【总结】
2018/05/28 Javascript
Vue.js组件通信之自定义事件详解
2019/10/19 Javascript
vant 解决tab切换插件标题样式自定义的问题
2020/11/13 Javascript
vue 使用localstorage实现面包屑的操作
2020/11/16 Javascript
[05:04]DOTA2上海特级锦标赛主赛事第二日TOP10
2016/03/04 DOTA
[01:14:55]EG vs Spirit Supermajor 败者组 BO3 第三场 6.4
2018/06/05 DOTA
Python实现将xml导入至excel
2015/11/20 Python
浅谈python迭代器
2017/11/08 Python
python Django编写接口并用Jmeter测试的方法
2019/07/31 Python
Python面向对象之私有属性和私有方法应用案例分析
2019/12/31 Python
墨西哥运动服饰和鞋网上商店:Netshoes墨西哥
2016/07/28 全球购物
Lookfantastic美国/加拿大:英国知名美妆购物网站
2019/03/27 全球购物
攀岩、滑雪、徒步旅行装备:Black Diamond Equipment
2019/08/16 全球购物
新西兰最大的天然保健及护肤品网站:HealthPost(直邮中国)
2021/02/13 全球购物
翻译学院毕业生自荐书
2014/02/02 职场文书
大学生求职工作的自我评价
2014/02/13 职场文书
教师远程培训感言
2014/03/06 职场文书
大学生团支书竞选稿
2015/11/21 职场文书
公司会议开幕词
2016/03/03 职场文书
关于Javascript闭包与应用的详解
2021/04/22 Javascript
如何正确理解python装饰器
2021/06/15 Python