黑马程序员技术交流社区
标题: PHP+jQuery+Ajax多图片上传 [打印本页]
作者: 武汉分校-小舞 时间: 2017-6-28 17:32
标题: PHP+jQuery+Ajax多图片上传
PHP+jQuery+Ajax多图片上传
本文稿由武汉校区就业部孙老师提供
今天我给大家分享的是在不刷新页面的前提下，使用PHP+jQuery+Ajax实现多图片上传的效果。用户只需要点击选择要上传的图片，然后图片自动上传到服务器上并展示在页面上。
我们在本文中用到一个Ajax表单提交插件：jqery.form.js，有高人修改了几行代码并改名为：jquery.wallform.js，直接拿来用。
HTML我们在页面上放置一个form表单，使用post提交到后台php处理程序upload.php，注意enctype属性设置要支持文件上传。#preview用来显示上传完毕后的图片。关于css样式设置本文不加说明，请参照下载包的源码。
[hide=d365]<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> [/hide]
jQuery本实例基于jQuery，因此必须在页面中载入jquery库以及jquery.wallform.js。
[hide=d365]
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.wallform.js"></script>
[/hide]
当点击按钮“添加图片”后，弹出选择文件对话框，选择要上传的图片后，触发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();
});
});
PHPupload.php处理图片上传，并将上传好的图片保存在uploads/目录，注意该目录要有写权限。首先需要检测是否为POST方式提交，然后判断图片格式、图片大小是否符合要求，然后使用move_uploaded_file()上传图片，并将图片重命名，格式为：time().rand(100,999)。
当然，实际应用中，可以与数据库以及用户中心结合，将用户上传的图片保存在数据表中，具体应用大家可以自行研究。
本文稿由武汉校区就业部孙老师提供
作者: hello_sgw 时间: 2017-7-14 19:25
一直很喜欢黑马的这个免费资源
作者: 且行且珍惜 时间: 2017-7-18 11:46
爱学习哎学习
作者: djjx5227 时间: 2017-7-27 00:28
刚要做到这个功能，还不太理解，来学习下
作者: yzwljlb 时间: 2017-7-27 07:54
看一看，学一学，顶一顶
作者: 13333706360 时间: 2017-8-11 09:55
学习学习
作者: cshaptx4869 时间: 2017-8-11 17:58
过来学习
作者: Foam 时间: 2017-8-16 12:50
正在想怎么上传图片
作者: qq19880527 时间: 2017-8-23 16:41
学习学习
作者: darry426 时间: 2017-8-23 17:00
xiangzhidao
作者: curzz 时间: 2017-8-23 20:19
谢谢分享
作者: mono88 时间: 2017-8-23 22:40
我的嘛,这么牛逼
作者: 门徒13 时间: 2017-8-24 12:33
让我看看
作者: zyx9527 时间: 2017-8-24 14:13
学习学习
作者: zyx9527 时间: 2017-8-24 14:15
？？？？？源码在哪下载???cnm,sb,死骗子
作者: 骑着黑马的唐僧 时间: 2017-8-29 19:16
ajax是最好的语言
作者: zuo 时间: 2017-9-6 10:53
而且为其
作者: anan881213 时间: 2017-9-6 16:55
看看 学习一下！~~~
作者: yzq123 时间: 2017-9-13 22:13
谢谢谢谢
作者: 忧郁之子 时间: 2017-9-18 15:02
的确不错，如果能把所有源码打包就更好了
作者: czh188 时间: 2017-9-19 01:01
过来学习
作者: 327083434 时间: 2017-9-22 01:36
学习学习学习
作者: 小满程序员 时间: 2017-10-20 14:26
地方东港股份
作者: pudilu 时间: 2017-10-25 14:52
还是不错的
作者: 小六的六六 时间: 2017-10-30 14:00
很强势可以的
作者: comebas 时间: 2017-11-2 11:50
这个还是很实用
作者: 做个坏的程序员 时间: 2017-11-8 16:54
小小黑马
作者: xgwhsgws 时间: 2017-11-8 21:40
很有用，值得学习，感谢楼主分享
作者: shuaigirl 时间: 2017-11-9 11:54
66666666666666666666666
作者: aaaim 时间: 2017-11-15 15:22
谢谢分享
作者: simple波 时间: 2017-11-16 12:02
1117979779879
作者: qq1847252773 时间: 2017-11-20 15:04
1111111111111111111111111111111111111111111111
作者: 初音hzd 时间: 2017-11-21 14:07
大佬带带我
作者: kzeal 时间: 2017-11-24 23:23
n一直很喜欢黑马的这个免费资源
作者: 播妞 时间: 2017-11-25 03:29
作者: 小心了 时间: 2017-11-25 12:09
想学好来，我想学好php
作者: lqt1128 时间: 2017-12-3 19:40
学习学习
作者: willbe 时间: 2017-12-7 08:33
学好AJAX很重要啊
作者: 2861527131 时间: 2017-12-7 21:12
谢谢分享
作者: 稚于最初 时间: 2017-12-10 14:16
感谢老铁
作者: phpMyadmin 时间: 2017-12-27 09:09
phpMyadmin
作者: d的疯狂 时间: 2017-12-30 09:37
非常感谢楼主的分享！！！！！！！！！！！！！！！
真是不错的教程，衷心感谢！！！！！！！！！！！
作者: mvpicy 时间: 2018-1-1 09:51
学习学习
作者: 2861527131 时间: 2018-1-5 23:29
楼主，没有看到源码下载
作者: erv 时间: 2018-2-1 10:57
1111111111111111111111
作者: Dadihqz 时间: 2018-2-9 08:52
PHP+jQuery+Ajax多图片上传
作者: ace小钊 时间: 2018-2-12 21:23
过来学习一下
作者: 曹凤东 时间: 2018-2-20 20:48
看不到啊
作者: lomeixiok 时间: 2018-2-21 18:46
来学习学习
作者: 冬瓜茶 时间: 2018-2-21 21:09
一直很喜欢黑马的这个免费资源
作者: maynyan_2016 时间: 2018-3-10 18:25
谢谢分享
作者: sunheima 时间: 2018-3-12 19:55
PHP+jQuery+Ajax多图片上传 [修改
作者: 呵呵998767 时间: 2018-3-15 11:17
想学习啊
作者: 番茄炒鸡蛋 时间: 2018-3-18 08:29
学习一下！~
作者: di2238460 时间: 2018-3-27 02:29
哈哈卡罗拉卡罗拉了解
作者: di2238460 时间: 2018-3-27 02:30
不错，看看这个怎么样啊
作者: IWantToBe... 时间: 2018-3-27 20:26
学一学。。。。。
作者: cwhello 时间: 2018-3-28 17:38
做到这个功能要学多久呢？
作者: 醉无言 时间: 2018-4-21 21:26
学习学习
作者: 喧哗的城市 时间: 2018-4-26 21:51
一直很喜欢黑马的这个免费资源
作者: heima61_yt 时间: 2018-5-14 12:45
老学员报道 谢谢分享！
作者: 繁华一世简 时间: 2018-5-23 22:33
谢谢分享
作者: 番茄炒鸡蛋 时间: 2018-5-26 08:12
学习一下
作者: q565723121 时间: 2018-5-28 12:46
66666666
作者: ai512169768 时间: 2018-6-27 14:36
学习学习学习学习学习学习学习学习学习
作者: pysl 时间: 2018-7-11 14:55
学习了，谢谢！
作者: pysl 时间: 2018-7-20 22:52
学习了，谢谢
作者: pysl 时间: 2018-7-25 07:10
学习，感谢分享
作者: 武汉分校-小舞 时间: 2018-7-27 12:00
留一条就行了哦
| 欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) |
黑马程序员IT技术论坛 X3.2 |
