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 相关文章推荐
php实现ping
Oct 09 PHP
PHP中error_reporting()函数的用法(修改PHP屏蔽错误)
Jul 01 PHP
PHP+APACHE实现网址伪静态
Feb 22 PHP
php中JSON的使用方法
Apr 30 PHP
Symfony2框架学习笔记之HTTP Cache用法详解
Mar 18 PHP
php如何控制用户对图片的访问 PHP禁止图片盗链
Mar 25 PHP
PHP实现的Redis多库选择功能单例类
Jul 27 PHP
PHP实现UTF8二进制及明文字符串的转化功能示例
Nov 20 PHP
详谈PHP中public,private,protected,abstract等关键字的用法
Dec 31 PHP
php递归函数怎么用才有效
Feb 24 PHP
thinkPHP5框架分页样式类完整示例
Sep 01 PHP
PHP字符串与数组处理函数用法小结
Jan 07 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安全性漫谈
2012/06/28 PHP
setAttribute 与 class冲突解决
2008/02/17 Javascript
Javascript Jquery 遍历Json的实现代码
2010/03/31 Javascript
Jquery中children与find之间的区别详细解析
2013/11/29 Javascript
javascript版的in_array函数(判断数组中是否存在特定值)
2014/05/09 Javascript
Bootstrap中的fileinput 多图片上传及编辑功能
2016/09/05 Javascript
bootstrap日期控件问题(双日期、清空等问题解决)
2017/04/19 Javascript
JS动态修改网页body的背景色实例代码
2017/10/07 Javascript
深入理解ES6中let和闭包
2018/02/22 Javascript
jquery.param()实现数组或对象的序列化方法
2018/10/08 jQuery
webpack4.0 入门实践教程
2018/10/08 Javascript
基于JS开发微信网页录音功能的实例代码
2019/04/30 Javascript
小程序关于请求同步的总结
2019/05/05 Javascript
Vue打包后访问静态资源路径问题
2019/11/08 Javascript
vuex实现数据状态持久化
2019/11/11 Javascript
微信sdk实现禁止微信分享(使用原生php实现)
2019/11/15 Javascript
微信小程序开发(一):服务器获取数据列表渲染操作示例
2020/06/01 Javascript
Python使用MONGODB入门实例
2015/05/11 Python
Python中super的用法实例
2015/05/28 Python
深入理解Python变量与常量
2016/06/02 Python
python中快速进行多个字符替换的方法小结
2016/12/15 Python
Python设计模式之观察者模式原理与用法详解
2019/01/16 Python
Flask框架学习笔记之表单基础介绍与表单提交方式
2019/08/12 Python
用python打开摄像头并把图像传回qq邮箱(Pyinstaller打包)
2020/05/17 Python
Python爬虫实例——爬取美团美食数据
2020/07/15 Python
python实现控制台输出颜色
2021/03/02 Python
IE兼容css3圆角的实现代码
2011/07/21 HTML / CSS
JBL澳大利亚官方商店:扬声器、耳机和音响系统
2018/05/24 全球购物
《九寨沟》教学反思
2014/04/08 职场文书
创先争优活动个人总结
2015/03/04 职场文书
2015年暑假工作总结
2015/07/13 职场文书
2016年七夕爱情寄语
2015/12/04 职场文书
python pygame入门教程
2021/06/01 Python
MySQL创建管理RANGE分区
2022/04/13 MySQL
Python可视化神器pyecharts绘制水球图
2022/07/07 Python
python playwright之元素定位示例详解
2022/07/23 Python