使用jquery插件ajaxfileupload.js可以实现页面无刷新上传图片文件，后台管理有关图片的上传功能可以利用它，很方便
一、目标效果:
1.前端，页面上传多张图片时，POST到服务器端，页面能立即显示图片效果，并且不刷新页面
2.后台,页面POST过来的图片被重命名并保存到服务器
二、思路：
1.封装一个js函数uploadimg(imgid,fileid,hiddenid),里面调用ajaxfileupload.js的函数$.ajaxFileUpload()将标签input type=’file’ 里的文件ajax方式上传到服务器，上传成功后接收返回json数据——图片在服务器端的路径data.path，将该值赋给img标签和对应的隐藏域
2.在服务器端有个专门处理ajax上传图片的PHP文件，首先判断文件类型和大小是否合法，然后将文件重命名并且移动一个文件暂存区，然后json格式返回图片路径给前端页面
3.等到页面真正提交表单信息到后台保存时，后台根据隐藏域中的图片路径值，将暂存区中的图片移动到真正永久保存图片的文件夹中
<html lang="en-US">
<head>
<Meta charset="UTF-8"/>
<Meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel='stylesheet' type="text/css" href='/assets/css/own/img.css' />
<script src="/assets/js/jquery-1.4.2.min.js"></script>
<script src="/assets/js/ajaxfileupload.js"></script>
<script src="/assets/js/own/uploadimg.js"></script>
<title>upload image</title>
</head>
<body>
<form id="w0" action="imgfile.PHP" name="form1" method="post" enctype="multipart/form-data" >
<div>
<input type="file" name="fileImg" id="fileImg" onchange="uploadimg('img1','fileImg','hidden1')" accept="image/jpeg,image/png,image/gif"><br />
<input type="hidden" name="hidden1" value="" />
<img class="load0" name="img1" id="img1" src="" />
</div>
<br /><br />
<div>
<input type="file" name="fileImg2" id="fileImg2" onchange="uploadimg('img2','fileImg2','hidden2')" accept="image/jpeg,image/gif"><br />
<input type="hidden" name="hidden2" id="hidden2" value="" />
<img class="load0" name="img2" id="img2" src="" />
</div>
<br /><br />
<input type="submit" value="ok">
</form>
</body>
</html>
②uploadimg.js代码，这里面调用了ajaxfileupload.js的函数来实现ajax图片文件上传，以及接收返回值后控制前端页面显示
function uploadimg(imgid,hiddenid) {
//imgid指<img />标签id,fileid表示<input type='file' />文件上传标签的id,hiddenid指隐藏域标签id
$("#"+imgid).attr("src","/assets/img/loading/load.gif").removeClass("load0");//加载loading图片
$.ajaxFileUpload
(
{
url: 'http://127.0.0.1/common/upImgfile.PHP',secureuri: false,fileElementId: fileid,dataType: 'json',success: function (data,status) { //data的内容都是在后台PHP代码中自定义的,json格式返回后在这里以对象的方式的访问
if(typeof (data.error) != 'undefined'){//上传文件出错
var error_msg="";
switch(data.error)
{
case "101": error_msg="文件类型错误";
break;
case "102": error_msg="文件过大";
break;
case "400": error_msg="非法上传";
break;
case "404": error_msg="文件为空";
break;
default :error_msg="服务器不稳定";
}
alert(error_msg);
}else{
$("#"+imgid).attr("src",data.path).addClass("load1");//加载返回的图片路径并附加上样式
$("#"+hiddenid).val(data.path);//给对应的隐藏域赋值，以便提交时给后台
}
},error: function (data,status,e) {
alert(e);
}
}
)
}
<?PHP //接收POST方式上传的文件，存放到临时文件夹 if(isset($_FILES)&&(!empty($_FILES))){ foreach($_FILES as $el)//获取文件，这里默认都是每次都单文件上传 { $file=$el; } if(is_uploaded_file($file["tmp_name"])){//确认是POST方式上传的文件 $cache_path="../assets/uploads/cache/";//暂存文件的目录 $fname=$file["name"];//获取文件名 $ftype=$file["type"];//获取文件类型 $ftmp_name=$file["tmp_name"];//获取临时文件路径 $fsize=$file["size"];//获取文件大小 $ferror=$file["error"];//获取文件错误代号 //判断文件大小是否符合规则 if(!check_size($fsize)){ echo json_encode(array("error"=>"102"));//102错误码代表文件过大 exit; } $suffix=strtolower(stristr($fname,"."));//获取文件后缀名(包含了点号),并后缀名小写化 //判断文件类型是否为图片 if(!is_img($suffix)){ //如果不是图片类型，直接返回error为101，代表文件类型错误 echo json_encode(array("error"=>"101")); exit; } $uniqStr=uniqid(strtotime("now")."_".mt_rand(100000,999999)."_");//创建随机ID $fname_new = $cache_path.$uniqStr.$suffix;//利用当前时间戳构造新的文件名称 move_uploaded_file($ftmp_name,$fname_new);//将临时文件区的文件移动到暂存区中 $fname_new=stristr($fname_new,"/"); echo json_encode(array("path"=>$fname_new));//返回文件路径给看、客户端 }else{ echo json_encode(array("error"=>"400"));//400错误码代表文件非法上传(不是httppost提交) } }else{ echo json_encode(array("error"=>"404"));//404错误码代表文件为空 } /** *判断文件后缀是否是图片 *@param string $suffix :带点的后缀名(如.jpg) *@return bool 如果是图片后缀名返回true,否则返回false */ function is_img($suffix){ $suffix_arr=array('.jpg','.png','.gif','.jpeg','.bmp'); return in_array(strtolower($suffix),$suffix_arr); } /** *判断文件大小是否非法 *@param int $size :单位为byte的整数，文件大小 *@return bool 如果文件大小小于或等于规定的最大值返回true,否则返回false */ function check_size($size){ $postMaxSize=intval(ini_get("post_max_size"));//post文件最大值 $uploadMaxFilesize = intval(ini_get("upload_max_filesize"));//upload上传文件最大值 $max=min($postMaxSize,$uploadMaxFilesize) *1024*1024;//将MB转换为byte单位数据 if(intval($size)<=$max){ return true; }else{ return false; } }
四、效果图
