php+ajax无刷新上传图片实例代码
作者:霍啸林 发布时间:2023-11-17 11:27:58
标签: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程序设计有所帮助。
0
投稿
猜你喜欢
- 本文实例讲述了php下pdo的mysql事务处理用法。分享给大家供大家参考。具体分析如下:php+mysql事务处理的几个步骤:1.关闭自动
- 代码如下:---这是一个人事系统中的示例,要求记录一下员工的缺勤情况 ---1.要在表中记录一下缺勤计分,是对经常缺勤者的一种处
- 上一课:ACCESS入门教程:初识Access 2000窗口接口简介 通过上一课的学习,你是否感觉Access的窗口和接口还有点搞不清楚,对
- 一、获取二叉树的深度就是二叉树最后的层次,如下图:实现代码:def getheight(self): &n
- 多级联动下拉选择框,动态获取下一级,每一级数据为XML,可支持无限级(浏览器端需要Microsoft.XMLDOM支持)项目需要,一个材料类
- 本文实例讲述了利用PHP函数计算中英文字符串长度的方法。分享给大家供大家参考。具体实现方法如下:一般来说大家知道英文字符占一个字节,而中文字
- 目录[redis 调用Lua脚本](#redis 调用Lua脚本)[redis+lua 实现评分排行榜实时更新](#redis+lua 实现
- 原本运行正常的ASP页面,今天突然提示: 代码如下: Microsoft VBScript 运行时错误 错误 '800a01a8&
- 网页的圆角处理,其实最开始的九宫格的表格处理是挺方便的,只是现在都不用表格布局了,自然就被非法取缔了。呵呵。微软的有VML画圆角,由于只是它
- 耦合两个或以上的体系或两种运动形式间相互作用而彼此影响以至于联合起来的现象。在软件工程中,对象之间的耦合度就是对象之间的依赖性,对象之间的耦
- 在MySQL中,一个字符串中,如果某个序列具有特殊的含义,则这个序列以反斜线符号(‘\’)开头,称为转义字符。常见的转义字符:\0 ASCI
- 本文介绍了使用Application来统计访问网站的在线人数的方法,并介绍了使用Application时应该注意的事项。首先讲明白,用ASP
- 精妙的"SQL"语句:◆复制表(只复制结构,源表名:a 新表名:b)SQL: select * into b from
- 前言最近遇到的几个网站在提交密码时提交的已经是密文,也就是说在网络上传输的密码是密文,这样提升了密码在网络传输中的安全性。后端语言加解密已
- 最近写了两个管理后台的前端页面,其中有一个管理后台,左侧菜单导航和右侧内容页是两个iframe,需求是,点击上面的主导航时,左侧iframe
- !DOCTYPE--------------------------------------------------------------
- 今天在写PHP程序的时候总是出现这样的错误:Parse error: syntax error, unexpected end of fil
- 随着网站访问量的加大,每次从数据库读取都是以效率作为代价的,很多用ACCESS作数据库的更会深有体会,静态页加在搜索时,也会被优先考虑。互联
- 一、流程分析分析发现密码加密,且发送POST请求时header必须携带x-csrftoken,否则是报403。而x-csrftoken是在第
- Sql Server的存储过程是一个被命名的存储在服务器上的Transacation-Sql语句集合,是封装重复性工作的一种方法,它支持用户