使用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.等到页面真正提交表单信息到后台保存时，后台根据隐藏域中的图片路径值，将暂存区中的图片移动到真正永久保存图片的文件夹中
三、代码:
1.前端：
①html页面:
<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/png,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,fileid,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);
}
}
)
}
2.后台:
upImgfile.php代码:
<?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;
}
}四、效果图
使用ajaxfileupload插件实现异步上传并保存图片功能
原文地址：http://blog.csdn.net/jo_andy/article/details/44998683
