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 相关文章推荐
怎样在UNIX系统下安装MySQL
Oct 09 PHP
NT IIS下用ODBC连接数据库
Oct 09 PHP
手把手教你使用DedeCms V3的在线采集图文教程
Apr 03 PHP
php下用cookie统计用户访问网页次数的代码
May 09 PHP
php数组函数序列之krsort()- 对数组的元素键名进行降序排序,保持索引关系
Nov 02 PHP
PHP 图片水印类代码
Aug 27 PHP
php中删除字符串中最先出现某个字符的实现代码
Feb 03 PHP
php实现获取局域网所有用户的电脑IP和主机名、及mac地址完整实例
Jul 18 PHP
php检查日期函数checkdate用法实例
Mar 19 PHP
php将日期格式转换成xx天前的格式
Apr 16 PHP
Django中的cookie与session操作实例代码
Aug 17 PHP
PHP实现一个轻量级容器的方法
Jan 28 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
关于PHP的curl开启问题探讨
2014/04/08 PHP
PHP使用PHPexcel导入导出数据的方法
2015/11/14 PHP
PHP对称加密算法(DES/AES)类的实现代码
2017/11/14 PHP
PHP通过文件路径获取文件名的实例代码
2018/10/14 PHP
jquery 元素相对定位代码
2010/10/15 Javascript
原生javascript实现DIV拖拽并计算重复面积
2015/01/02 Javascript
JQuery简单实现锚点链接的平滑滚动
2015/05/03 Javascript
jQuery插件制作之全局函数用法实例
2015/06/01 Javascript
jQuery实现监控页面所有ajax请求的方法
2015/12/10 Javascript
JS运动相关知识点小结(附弹性运动示例)
2016/01/08 Javascript
实现高性能JavaScript之执行与加载
2016/01/30 Javascript
AngularJS基础 ng-show 指令简单示例
2016/08/03 Javascript
Bootstrap的popover(弹出框)在append后弹不出(失效)
2017/02/27 Javascript
JavaScript正则获取地址栏中参数的方法
2017/03/02 Javascript
vue2.0实现倒计时的插件(时间戳 刷新 跳转 都不影响)
2017/03/30 Javascript
Angular.JS中select下拉框设置value的方法
2017/06/20 Javascript
JS使用正则表达式找出最长连续子串长度
2017/10/26 Javascript
jQuery实现为table表格动态添加或删除tr功能示例
2019/02/19 jQuery
vue子路由跳转实现tab选项卡
2019/07/24 Javascript
vue 动态创建组件的两种方法
2020/12/31 Vue.js
python中的错误处理
2016/04/10 Python
Python 比较文本相似性的方法(difflib,Levenshtein)
2018/10/15 Python
Roots加拿大官网:加拿大休闲服饰品牌
2016/10/24 全球购物
GAP阿联酋官网:GAP UAE
2017/11/30 全球购物
东方红海科技面试题软件测试方面
2012/02/08 面试题
基层工作经历证明
2014/01/13 职场文书
旅游项目开发策划书
2014/01/18 职场文书
中英文求职信范文
2014/01/27 职场文书
大学生创业计划书怎么写
2014/09/15 职场文书
2015秋季开学典礼致辞
2015/07/16 职场文书
获奖感言一句话
2015/07/31 职场文书
关于教师节的广播稿
2015/08/19 职场文书
2016年优秀班主任先进事迹材料
2016/02/26 职场文书
Python编程super应用场景及示例解析
2021/10/05 Python
Html5同时支持多端sdk的小技巧
2021/11/17 HTML / CSS
table设置超出部分隐藏,鼠标移上去显示全部内容的方法
2022/12/24 HTML / CSS