序言：相比传统的input+file提交表单上传图片，ajax无页面刷新上传图片极大地优化了用户的体验感，下面让我们一块来学习一下，赶紧点赞收藏吧。
The rain 非常好听的治愈系纯音乐.mp35:41来自小程序软件开发
上传页面
代码
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常见的后台内容管理系统，非常适合初级程序员的建站系统
声明：本站部分文章及图片源自用户投稿，如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢！