序言：相比传统的input+file提交表单上传图片，ajax无页面刷新上传图片极大地优化了用户的体验感，下面让我们一块来学习一下，赶紧点赞收藏吧。
上传页面
代码
html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>PHP+Ajax无刷新上传头像预览</title>
<style type="text/css">
a{cursor:pointer;}
body{background: #fff none repeat scroll 0 0; color: #333; font: 12px/1.5 "Microsoft YaHei","Helvetica Neue",Helvetica,STHeiTi,sans-serif; background-position: left top; background-repeat: repeat; background-attachment: scroll;}
.clearfix:after{visibility:hidden; display:block; font-size:0; content:" "; clear:both; height:0}
*:first-child+html .clearfix{zoom:1}
ul,li{list-style: none;padding:0;margin:0}
.avatar_uplpad_btn {
background: url("images/avatar_uplpad_btn.png") no-repeat scroll 0 0;
display: inline-block;
height: 30px;
width: 82px;
}
.loading_bar{background: #f2f2f5 none repeat scroll 0 0;border-radius: 6px;display: inline-block;font-size: 0;height: 10px;overflow: hidden;text-align: left;width: 250px;}
.loading_bar em{background: #fa7d3c none repeat scroll 0 0;display: inline-block;height: 10px;vertical-align: top;}
</style>
</head>
<body>
<div class="avatar_area" style="margin:120px 0 0;text-align: center;min-height: 300px">
<a href="javascript:void(0);"class="avatar_uplpad_btn" id="avatar_uplpad_btn"></a>
<div id="avatar_pic" style="margin:30px 0 0">
</div>
<div id="loading_bar" style="display:none">
<p id="updesc">图片上传中...</p>
<span class="loading_bar"><em id="percent" style="width: 27%;"></em></span>
<span id="percentnum">27%</span>
</div>
</div>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="plUpload/plupload.full.min.js"></script>
<script type="text/javascript">
var uploader_avatar = new plupload.Uploader({//创建实例的构造方法
runtimes: 'gears,html5,html4,silverlight,flash', //上传插件初始化选用那种方式的优先级顺序
browse_button: ['avatar_uplpad_btn'], // 上传按钮
url: "ajax.php", //远程上传地址
flash_swf_url: 'js/plugins/plupload/Moxie.swf', //flash文件地址
silverlight_xap_url: 'js/plugins/plupload/Moxie.xap', //silverlight文件地址
filters: {
max_file_size: '10mb', //最大上传文件大小（格式100b, 10kb, 10mb, 1gb）
mime_types: [//允许文件上传类型
{title: "files", extensions: "jpg,png,gif,jpeg"}
]
},
multi_selection: false, //true:ctrl多文件上传, false 单文件上传
init: {
FilesAdded: function(up, files) { //文件上传前
$("#avatar_pic").hide();
$("#loading_bar").show();
uploader_avatar.start();
},
UploadProgress: function(up, file) { //上传中，显示进度条
var percent = file.percent;
$("#percent").css({"width": percent + "%"});
$("#percentnum").text(percent + "%");
},
FileUploaded: function(up, file, info) { //文件上传成功的时候触发
var data = eval("(" + info.response + ")");//解析返回的json数据
$("#avatar_pic").html("<img src='" + data.pic + "'/>");
$("#loading_bar").hide();
$("#avatar_pic").show();
},
Error: function(up, err) { //上传出错的时候触发
alert(err.message);
$("#loading_bar").hide();
}
}
});
uploader_avatar.init();
</script>
<!-- 以下是统计及其他信息，与演示无关，不必理会 -->
<style type="text/css">
.vad { margin: 120px 0 5px; font-family: Consolas,arial,宋体,sans-serif; text-align:center;}
.vad a { display: inline-block; height: 36px; line-height: 36px; margin: 0 5px; padding: 0 50px; font-size: 14px; text-align:center; color:#eee; text-decoration: none; background-color: #222;}
.vad a:hover { color: #fff; background-color: #000;}
.thead { width: 728px; height: 90px; margin: 0 auto; border-bottom: 40px solid #fff;}
</style>
</body>
</html>
php
<?php
$typeArr = array("jpg", "png", "gif", "jpeg", "mov", "gears", "html5", "html4", "silverlight", "flash"); //允许上传文件格式
$path = "uploads/"; //上传路径
if (isset($_POST)) {
$name = $_FILES['file']['name'];
$size = $_FILES['file']['size'];
$name_tmp = $_FILES['file']['tmp_name'];
if (empty($name)) {
echo json_encode(array("error" => "您还未选择文件"));
exit;
}
// print_r($_FILES['file']);
$type = strtolower(substr(strrchr($name, '.'), 1)); //获取文件类型
if (!in_array($type, $typeArr)) {
echo json_encode(array("error" => "清上传指定类型的文件！","type"=>"types"));
exit;
}
if ($size > (50000 * 1024)) { //上传大小
echo json_encode(array("error" => "文件大小已超过50000KB！","type"=>"size"));
exit;
}
$pic_name = time() . rand(10000, 99999) . "." . $type; //文件名称
$pic_url = $path . $pic_name; //上传后图片路径+名称
if (move_uploaded_file($name_tmp, $pic_url)) { //临时文件转移到目标文件夹
echo json_encode(array("error" => "0", "pic" => $pic_url, "name" => $pic_name));
} else {
echo json_encode(array("error" => "上传有误，清检查服务器配置！","type"=>"config"));
}
}
?>
效果图
我是小程序软件开发，每天分享开发过程中遇到的知识点，如果对你有帮助的话，帮忙点个赞再走呗，非常感谢。
往期文章分享：
阿里图标iconfont的多种使用方式，对开发者来说是非常的友好
php常见的后台内容管理系统，非常适合初级程序员的建站系统
最新评论