PHP+jQuery+Ajax多图片上传

2014年11月09日 12:05helloweba.com 作者:月光光 标签: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样式设置本文不加说明,请参照下载包的源码。


<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;
}

当然,实际应用中,可以与数据库以及用户中心结合,将用户上传的图片保存在数据表中,具体应用大家可以自行研究。

声明:本文为原创文章,helloweba.net和作者拥有版权,如需转载,请注明来源于helloweba.net并保留原文链接:https://www.helloweba.net/javascript/277.html

28条评论

  • 老铁666

    我在https上测试通过可以跑

  • リ丶丶灬Pig"

    楼主我想问下,为什么https就不有上传,并且弹出上传错误

  • 武

    要怎么处理才可以把上传的多张图片的地址写入变量

  • 武

    数据库的提交和删除功能再讲讲吧

  • 你这么牛b还来浏览网上分享的插件??应该是自己写吧???奇怪啊!!

  • 他是在PHP 中返回的 。把他的返回改为 echo '<div class="preview"><img src="'.$imgRead.'" style="width:100%;height:100%">
    <span class="buttoms" onclick="delImg(0,\''.$imgRead.'\',$(this))">删除</span><input type="hidden" class="ypd" name="priceName[]" value=\''.$imgRead.'\'> <input type="text" class="orders" placeholder="排序" name="orders[]" ></div>';就有返回呢 $imgRead是 图片的路径

    CSS 隐藏域和都一起存到页面的 .demo{width:760px; margin:40px auto 0 auto; min-height:150px;}
    .preview{width:200px;border:solid 1px #dedede; margin:10px;padding:10px;height: 200px;display:inline-block;padding-bottom: 30px}
    .preview img{margin-bottom:5px;}
    .demo p{line-height:26px}
    .btn{position: relative;overflow: hidden;margin-right: 4px;display:inline-block;*display:inline;padding:4px 10px 4px;font-size:14px;line-height:18px;*line-height:20px;color:#fff;text-align:center;vertical-align:middle;cursor:pointer;background-color:#5bb75b;border:1px solid #cccccc;border-color:#e6e6e6 #e6e6e6 #bfbfbf;border-bottom-color:#b3b3b3;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}
    .btn input {position

  • 插入数据库可以讲解一下么

  • 你不知道自己写吗?什么都饭来伸手,人家已经无私分享了!这点变通能力没有,不要做程序员了!

  • 没删除、、差评

  • 请问 我这里显示 js 里面有错 我下载form js 放进去之后没问题 可以单图片 但是 用wallform 显示117行错误 怎么解决? 赶

  • 为什么我上传了图片,页面也显示了,但那个上传状态的横杆一直没跳回添加图片

  • 缺点貌似就是这个 不能固定接收个name值 存入数据库

  • 我的图片 上传 总是 失败 能 指教 一下吗

  • 我的 上传 不上去 能 指教一下吗

  • 能加个删除图片,再来个设置封面就霸道了

  • 初次打开inde.html可以上传,可是为什么刷新一次就不行了呢???

  • 这个怎么能把上传的图片直接提交到我表单的INPUT?!

  • /** Www.Qarqan.Com **/

    ** 单文件上传 **/
    .del{ width:200px; height:200px; overflow:hidden; float:right; display:block;margin:5px;border:solid 1px #dedede;}
    .del .na{ width:30px; height:30px; overflow:hidden;float:right; display: inline-block; position:relative; z-index:2; top:0px; right: 0px; background: url(images/dels.gif) center top no-repeat; cursor:pointer;}
    .del .ma{ width:200px; height:200px; overflow:hidden;display:block; position: relative;z-index:1; top: -30px; right:0px;}
    .del .ma .preview{width:190px;height:190px;margin:5px;}
    /** 多文件上传 **/
    .dal{width:220px;height:220px;overflow:hidden;float:right;display:block;margin:0px 0px 0px 6px;border:solid 1px #dedede;}
    .dal .na{width:30px;height:30px;overflow:hidden;float:right;display:inline-block;position:relative;z-index:2;top:0px;right:0px;background:url(images/dels.gif) center top no-repeat;cursor:pointer;}
    .dal .ma{width:220px;height:220px;overflow:hidden;display:block;position:relative;z-index:1;top:-30px;right:0px;}
    .dal .ma .preview{width:216px;height:216px;margin:2px;}





    Jquery 部分

    success: function(data) {
    var img = "upload/temp/"+data.pic;
    showimg.show();
    showimg.html("<div class=\"del\"><span class='na delimg' rel='"+data.pic+"'></span><span class=\"ma\"><img src='"+img+"' class=\"preview\"></span><input type='text' id='pic' name='pic' class='pic hidden' value='"+img+"' /></div>");
    btn.html('رەسىم يوللاش');
    },

  • 演示代码是不是有误? 上传始终显示出错啊~

  • 为什么PHP判断是错误的提示,但是ajax返回的不是error 而是正常的succes呢