PHP+jQuery+Ajax实现多图片上传效果
作者:hebedich 发布时间:2024-05-22 10:05:59
标签:PHP,jQuery,Ajax,多图片上传
今天我给大家分享的是在不刷新页面的前提下,使用PHP+jQuery+Ajax实现多图片上传的效果。用户只需要点击选择要上传的图片,然后图片自动上传到服务器上并展示在页面上。
HTML
我们在页面上放置一个form表单,使用post提交到后台php处理程序upload.php,注意enctype属性设置要支持文件上传。#preview用来显示上传完毕后的图片。关于css样式设置本文不加说明,请参照下载包的源码。
<form id="imageform" method="post" enctype="multipart/form-data" action="upload.php">
<div id="up_status" style="display:none"><img src="loader.gif" alt="uploading"/></div>
<div id="up_btn" class="btn">
<span>添加图片</span>
<input id="photoimg" type="file" name="photoimg">
</div>
</form>
<p>最大100KB,支持jpg,gif,png格式。</p>
<div id="preview"></div>
jQuery
本实例基于jQuery,因此必须在页面中载入jquery库以及jquery.wallform.js。
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.wallform.js"></script>
当点击按钮“添加图片”后,弹出选择文件对话框,选择要上传的图片后,触发change事件。然后表单#imageform调用jquery.wallform.js的ajaxForm()方法,将表单数据提交给后台PHP处理,并根据返回结果处理页面元素的展示。如果上传成功,图片会一张张排列显示在页面上。关于ajaxForm()的使用可以参照本站文章:Ajax表单提交插件jqery form。
$(function(){
$('#photoimg').die('click').live('change', function(){
var status = $("#up_status");
var btn = $("#up_btn");
$("#imageform").ajaxForm({
target: '#preview',
beforeSubmit:function(){
status.show();
btn.hide();
},
success:function(){
status.hide();
btn.show();
},
error:function(){
status.hide();
btn.show();
} }).submit();
});
});
PHP
upload.php处理图片上传,并将上传好的图片保存在uploads/目录,注意该目录要有写权限。首先需要检测是否为POST方式提交,然后判断图片格式、图片大小是否符合要求,然后使用move_uploaded_file()上传图片,并将图片重命名,格式为:time().rand(100,999)。
$path = "uploads/";
$extArr = array("jpg", "png", "gif");
if(isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST"){
$name = $_FILES['photoimg']['name'];
$size = $_FILES['photoimg']['size'];
if(empty($name)){
echo '请选择要上传的图片';
exit;
}
$ext = extend($name);
if(!in_array($ext,$extArr)){
echo '图片格式错误!';
exit;
}
if($size>(100*1024)){
echo '图片大小不能超过100KB';
exit;
}
$image_name = time().rand(100,999).".".$ext;
$tmp = $_FILES['photoimg']['tmp_name'];
if(move_uploaded_file($tmp, $path.$image_name)){
echo '<img src="'.$path.$image_name.'" class="preview">';
}else{
echo '上传出错了!';
}
exit;
}
//获取文件类型后缀
function extend($file_name){
$extend = pathinfo($file_name);
$extend = strtolower($extend["extension"]);
return $extend;
}
当然,实际应用中,可以与数据库以及用户中心结合,将用户上传的图片保存在数据表中,具体应用大家可以自行研究。
0
投稿
猜你喜欢
- 如下所示:df = df[df['cityname']==u'北京市']记得,如果用的python2,一定要
- <?php $foo = 'Bob'; // 将 'Bob' 赋给 $foo $bar = &
- Go语言中strconv包实现了基本数据类型和其字符串表示的相互转换。strconv包实现了基本数据类型与其字符串表示的转换,主要有以下常用
- MySQL的ALTER命令是非常有用的,当想改变表的名称,表的字段,或者如果要添加或删除一个现有的表中的列。让我们开始创建一个表名为test
- 本文实例讲述了Python中文竖排显示的方法。分享给大家供大家参考。具体如下:这里将中文竖排显示比如 衣食者人之生利也,然且犹尚有节,葬埋者
- 请求动态参数(例如时间戳)有时我们在请求接口时,需要带上当前时间戳这种动态参数,那么postman能不能自动的填充上呢。我们可以使用post
- [前言] 我们经常会遇到多重查询问题,而长长的SQL语句往往让人丈二和尚摸不着头脑。特别是客户端部分填入
- 网上有很多方法能够过去到IP地址归属地的脚本,但是我发现淘宝IP地址库的信息更详细些,所以用shell写个脚本来处理日常工作中一些IP地址分
- 建立资料表:Step1首先开启phpmyadmin,进入wordpress资料库中,并新增一个wp_gbook的资料表与栏位数目8。Step
- 在Vue项目中编写代码的时候经常会碰到这种烦人的无故报错,其实这是ESLint代码,如图下:解决办法:File>Settings>
- 树,因其清晰明了的展现形式而被广泛的使用日常的开发过程中我们需要经常与“树”打交道,例如公司的组织架构树、服务器的项目归属树,管理后台侧边树
- 最近被“模块化”缠身,又是文章又是PPT的,被逼着想了很多相关的东西。整理下我这段时间对于“模块化”的思考,大多都是我自己从事页面重构这份工
- 相信很多人在使用正则表达式的时候都会遇到如下的语句:通过查阅正则表达式的API文档可以了解到正则表达式的语法知识:很多小伙伴就会产生疑问为什
- 1.概述"""基础知识:1.多任务:操作系统可以同时运行多个任务;2.单核CPU执行多任务:操作系统轮流让各个
- 实现目标:mysql下将自增主键的值,从10000开始,即实现自增主键的种子为10000。方案1)使用alter table `tablen
- LBound函数:返回指定数组维的最小可用下标;UBound函数:返回指定数组维的最小可用上标;LBound(arrayname, [,di
- josn基本操作1.导入import json2.字典转json:json.dumps(dict,ensure_ascii=False),加
- mssql的每个varchar、text字段都被自动插入一段js代码,即使删除这段代码,如果没有从源头上解决,几分钟后,js代码就又会自动插
- 面试题:索引是什么?索引的优点?索引的缺点?在建立索引的时候都有哪些需要考虑的因素呢?为数据表建立索引的原则有哪些?什么是索引覆盖?非聚簇索
- 一、Tesseract简介Tesseract是一个OCR库(OCR是英文Optical Character Recognition的缩写),